BFC（block formatting context）解析

块级格式化上下文

BFC是块级盒布局的出现的区域，也是浮动元素交互的区域。是一块独立的渲染区域，只有块级盒子参与，规定了内部块级盒子的布局，并且这块区域和外部无关。

对于定位（float）和清除浮动（clear）很有用。这两个样式规则只适用于处于同一BFC下的元素。

布局规则和特性

1. 因为只有块级盒子参与，在Box内部垂直方向一个接一个放置。
2. box在垂直方向的距离由margin决定，而同一个BFC的两个相邻Box会发生margin叠加。
3. 每个元素的左边（包含margin-left）与包含块box的左边对齐，即使存在浮动也一样。
4. BFC的区域不会与浮动盒子（float box）相叠加。
5. BFC在页面就是一个隔离的独立容器，容器内部的子元素不会影响到外部的元素，反之亦然。
6. 在计算BFC的高度时，浮动元素也参与计算。

触发BFC的条件

1. 根元素或者其它包含它的元素。
2. 浮动元素（元素的float的值不为none）。
3. 绝对定位元素（元素的position的值为absolute或者fixed）。
4. 内联块（元素具有display: inline-block）。
5. 表格单元格（元素具有display: table-cell）。
6. 表格标题（元素具有display: table-caption）。
7. 具有overflow且值不为visible的块元素。

BFC应用

自适应两栏布局

每个元素的左边与包含块的左边对齐（规则3），出现下图的情况

src="//jsfiddle.net/tendernessmile/1q0mmjzv/embedded/html,css,result/" allowfullscreen="allowfullscreen" width="100%" height="300"> 此时只有aside属于一个BFC，当给main加上overflow:hidden;之后，触发了main元素的BFC，然后main不与浮动盒子相叠加（规则4），BFC是一个隔离的独立容器，不影响外界元素（规则5），所以aside和main就如下图所示。 src="//jsfiddle.net/tendernessmile/e4759Lym/2/embedded/" allowfullscreen="allowfullscreen" width="100%" height="300"> #### 清除浮动 将包裹元素的子元素设置为浮动元素，则子元素触发BFC，它们就脱离了包裹父元素，父元素高度塌陷，导致如下图所示。 src="//jsfiddle.net/tendernessmile/2qp6akwz/embedded/html,css,result/" allowfullscreen="allowfullscreen" width="100%" height="300"> 再将包裹父元素设置overflow:hidden触发BFC，则它计算高度的时候包括浮动元素（规则6），出现下图 src="//jsfiddle.net/tendernessmile/4zqvepmo/embedded/" allowfullscreen="allowfullscreen" width="100%" height="300"> #### 防止外边距重叠 先看一个外边距叠加的例子 src="//jsfiddle.net/tendernessmile/r688eoev/1/embedded/html,css,result/" allowfullscreen="allowfullscreen" width="100%" height="300"> p的高度为50px,上下外边距各为50px，那么上下两个p之间的距离应该为100px--两个p高度的距离， 但是并没有那么长的距离，这里就发生了外边距叠加。 现在再触发第一个p的BFC。将会有如下的结果。 src="//jsfiddle.net/tendernessmile/xm3z97hm/embedded/html,css,result/" allowfullscreen="allowfullscreen" width="100%" height="300"> 可以看出外边距重叠问题解决了。

整个博客写下来加深了我对BFC的理解，以前是知其然不知其所以然，现在发现回过头去想这些问题，发现比以前的理解更深刻了，这里小小记录一下曾经不会或者理解不深刻的知识。

参考

1. 块级格式化上下文
2. BFC原理详解
3. CSS之BFC详解