CSS之BFC

什么是BFC(Block formatting contexts)?

浮动元素，绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

通俗理解：
BFC是一个独立的布局环境，我们可以理解为一个箱子，箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的运用

用于清除（闭合）浮动
在线演示

info类里面的文字受到了浮动元素的影响，但这并不是我们所期望的。此时我们可以为P元素的内容建立一个BFC，让其内容消除对外界浮动元素的影响。根据上文所知，只要给info元素添加overflow:hidden;即可为其内容建立新的BFC。

解决margin叠加问题，可以给元素添加一个父元素，让它触发BFC。

.BFC{
    overflow:hidden;
}

合并外边距与BFC

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

产生折叠的必备条件：margin必须是邻接的
两个margin是邻接的必须满足以下条件：

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
• 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
• 都属于垂直方向上相邻的外边距