在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)
创建BFC
-
float的值不是none
-
position 的值不是static或者relative
-
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
-
overflow的值不是visible
BFC的特性
-
内部的BOX会在垂直方向上一个接一个的放置
-
于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。
-
每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时,浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
BFC在布局中的应用
要阻止margin重叠,只要将俩个元素别放在一个BFC中即可
使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或者浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定,中间栏可以根据浏览器宽度自适应