关于BFC

一、 BFC 定义

BFC(Block formatting context)块级格式化上下文：

• 文档根元素 是 BFC。
• float、absolute、fixed定位，非块盒（block）的块容器（inline-blocks、table-cells 、table-captions）和 overflow 不为 visible 的块盒，会建立新的 BFC。

处在同一块级格式化上下文中的元素，比如h1、p会遵从一些规则：

1. 元素会从上到下排列
2. 另外元素和元素之间，如果有margin，会产生合并，比如一个下margin和下一个元素的上margin合并而一旦使用了开头所属的元素，则会建立新的块级格式化上下文（BFC）， 不再受上一个容器的影响，有了自己的那套格式化规则，有自己的浮动。

二、BFC特性和作用

1. BFC会阻止垂直外边距合并:
只有同在一个BFC时，两个元素才会有可能发生垂直方向上的margin的重叠，这种元素包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如border、非空内容，padding等），就会发生margin重叠。
因此只要让它们不再同一个BFC就行了。对相邻元素意义不大，嵌套元素很有必要建立新的BFC。
2. BFC不会重叠浮动元素:
可用来清除浮动.
3. BFC可以包裹住内部元素（爸爸管儿子），包括浮动元素:
父容器触发了BFC，便可以包含子元素的浮动（当然，浮动本身也能触发BFC）。
根元素是BFC，如果不创建额外的BFC来包住浮动子元素，总会被根元素兜住的。所以浮动元素的父元素可能高度坍塌，但你从没见过 元素会因为内部元素浮动而坍塌，就是因为根元素是 BFC。
4. BFC能包含内部所有内容，除非儿子自己又成为BFC，那么爷爷就管不到孙子了。

三、display: flow-root

此属性是最新的CSS属性，专门用来解决以上各种为了创建BFC而引出副作用的问题，可以一键创建BFC，其他啥都不干。

四、总结

1. 爸爸管儿子（比如清除浮动）
2. 兄弟之间划清界限（比如两栏布局 float+bfc）

用BFC的特性清除浮动，总归都会有副作用，相对来说 overflow 副作用最小，但依然会影响后面相邻元素的显示，所以清除浮动就老老实实用 clearfix，否则错上加错，男上加男。没有任何场景必须要用BFC，除了面试！

参考链接

前端精选文摘：BFC 神奇背后的原理
MDN :Block formatting context