BFC规范的理解

在一个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的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应