简单介绍BFC

 BFC

  就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。

 创建 BFC 的方式有:

  1.html的根元素

  2.float浮动

  3.绝对定位

  4.overflow不为 visible

  5.display为表格布局或弹性布局

  6.contain值为layout

  7.content或 strict的元素等。

 

 BFC的作用:

  1.清除浮动

  2.解决margin塌陷问题

 

 BFC的特点:

  1.内部box会一个一个的垂直放置

  2.形成了BFC的区域不会与float box重叠,BFC在页面是个独立的容器,里外元素互不影响

  3.BFC在计算高度时会把浮动元素计算进去

  4.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)

BFC的作用及其应用的更多相关文章

  1. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  2. 浅析BFC及其作用

    本文链接:https://blog.csdn.net/riddle1981/article/details/52126522

  3. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

  4. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  5. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  6. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. 前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  9. BFC,定位,浮动,7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. linux下redis的安装、启动、关闭和卸载

    edis 在Linux 和 在Windows 下的安装是有很大的不同的,和通常的软件安装是一样的. 一  下载 Redis 安装包 去redis 官网下载reids 安装包, redis 官网默认只提 ...

  2. java集合——Map

    声明:以下内容都是来自网络总结,将会参考很多,没有声明转载来源. 一.Map接口 1.HashMap HashMap和HashTable的区别:http://blog.csdn.net/shohoku ...

  3. 使用SQL中的update更新多个字段值

    使用SQL中的update更新多个字段值,set后面的条件要用逗号不能用and set后面的多个条件之间没有关联也不可以有关联,所以就不能用and了:where 条件后面 可以为and 如: upda ...

  4. 2018-2019-2 《网络对抗技术》Exp8 Web基础 Week11-12 20165233

    Exp8 Web基础 目录 一.基础问题 二.实验步骤 实验点一:Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. 实验 ...

  5. spring boot + vue 前后分离实现登录功能(一)

    使用webpack 打包初始化项目 vue init webpack book-vue 进入工程目录 cd hello-vue 安装 vue-router npm install vue-router ...

  6. 性能监控 | MAT分析内存泄漏

    使用MAT分析内存泄漏(二)八周年重印版 - 知乎 .u-safeAreaInset-top { height: constant(safe-area-inset-top) !important; h ...

  7. vue 引入公共css文件

    1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...

  8. 关于浏览器请求PHP一次请求执行了两次

    测试同学今天又双叒反馈了一个Bug 继上次解决了重复请求的问题之后,本来就以为可以万事大吉了,没想到我还是太年轻了,测试同学说,不行啊,老哥,你这个我点击了一次创建居然创建出来两条数据!!并且查看日志 ...

  9. 猎豹网校C++ Primer学习笔记2

    14.数组 数组定义时的长度必须是在编译时就能确定的值. 全局数组会自动初始化为0. size_t 15.指针 其指向类型要相同. 指针和引用: 指针可以先不初始化,可以修改指向.有指针的指针. 16 ...

  10. <JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题

    出现的问题如下图所示(截屏看不出来看log) 再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置,回到左上角. 我以为是冒泡机制导致的所以添加了下面一段阻止冒泡,随便也阻止了默认事件,但 ...