一、 BFC 定义
BFC(Block formatting context)块级格式化上下文：
- 文档根元素 <html> 是 BFC。
float、absolute、fixed定位，非块盒（block）的块容器（inline-blocks、table-cells、table-captions）和overflow不为visible的块盒，会建立新的 BFC。
处在同一块级格式化上下文中的元素，比如h1、p会遵从一些规则：
- 元素会从上到下排列
- 另外元素和元素之间，如果有margin，会产生合并，比如一个下margin和下一个元素的上margin合并而一旦使用了开头所属的元素，则会建立新的块级格式化上下文（BFC）， 不再受上一个容器的影响，有了自己的那套格式化规则，有自己的浮动。
二、BFC特性和作用
1. BFC会阻止垂直外边距合并:
只有同在一个BFC时，两个元素才会有可能发生垂直方向上的margin的重叠，这种元素包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如border、非空内容，padding等），就会发生margin重叠。
因此只要让它们不再同一个BFC就行了。对相邻元素意义不大，嵌套元素很有必要建立新的BFC。
2. BFC不会重叠浮动元素:
可用来清除浮动.
3. BFC可以包裹住内部元素（爸爸管儿子），包括浮动元素:
父容器触发了BFC，便可以包含子元素的浮动（当然，浮动本身也能触发BFC）。
根元素<html>是BFC，如果不创建额外的BFC来包住浮动子元素，总会被根元素兜住的。所以浮动元素的父元素可能高度坍塌，但你从没见过 <html> 元素会因为内部元素浮动而坍塌，就是因为根元素是 BFC。
4. BFC能包含内部所有内容，除非儿子自己又成为BFC，那么爷爷就管不到孙子了。
三、display: flow-root
此属性是最新的CSS属性，专门用来解决以上各种为了创建BFC而引出副作用的问题，可以一键创建BFC，其他啥都不干。
四、总结
- 爸爸管儿子（比如清除浮动）
- 兄弟之间划清界限（比如两栏布局 float+bfc）
用BFC的特性清除浮动，总归都会有副作用，相对来说 overflow 副作用最小，但依然会影响后面相邻元素的显示，所以清除浮动就老老实实用 clearfix，否则错上加错，男上加男。没有任何场景必须要用BFC，除了面试！
