BFC

BFC的概念

BFC(Block formatting context)直译为"块级格式化上下文"。

block：Block-level box，块级盒子（div,p,section...）,display 属性为 block, list-item, table 的元素
inline：inline-level box, 内联级盒子（span,em...）display 属性为 inline, inline-block, inline-table 的元素
formatting context: 是 W3C CSS2.1 规范中的一个概念。它有一套渲染规则,决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC), CSS3 中还增加了 GFC 和 FFC。

所以，根据以上解释，我们可以知道BFC它实质就是一个只针对 Block元素的渲染区域，决定了block元素如何布局，并且它内部子元素的渲染毫不影响区域外部元素。

BFC布局规则：

    内部的Box会在垂直方向，一个接一个地放置。
    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    BFC的区域不会与float box重叠。
    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    计算BFC的高度时，浮动元素也参与计算

触发BFC

1.根元素，即html元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

作用

BFC 对布局的影响主要体现在对 float 和 margin 两个属性的处理。BFC 让 float 和 margin 这两个属性的表现更加符合我们的直觉。

1. 自适应两栏布局

<div style="float: left; width: 100px; height: 100px; background: #000;"></div>
<div style="overflow: hidden; height: 200px; background: #aaa;"></div>

BFC的区域不会与float box重叠，第二个盒子通过overflow:hidden;来生成BFC，效果如下图

2. 清除浮动造成的高度塌陷

给父级box生成BFC即可，如添加overflow:hidden、float等。

3. 阻止margin重叠

来看第一种情况，父子之间：

<div style="background: #aaa; width: 200px; height: 200px;">
    <div style="width: 100px; height: 80px; margin-top: 50px; background: #000;"></div>
</div>

效果图：

子元素的margin-top并没有使它相对于父元素推移50px，而是将父子两元素一起向下推移。而我们希望的是父元素不动，子元素相对父元素往下推移50px，如下图：

给父元素生成bfc就可以了。

来看第二种情况，兄弟之间：

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

<div style="width: 100px; height: 100px; background: #000; margin-bottom: 10px;"></div>
<div style=" height: 200px; background: #aaa; margin-top: 20px;"></div>

效果如下图：

给第二个div浮动：

推荐：

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

http://www.cnblogs.com/xiaohuochai/p/5248536.html