BFC是什么
Block Formatting Context ：块级格式化上下文
W3C官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。
BFC是一个完全独立的空间，空间里的子元素完全不会影响到外面的布局。
总结：BFC：块级格式化上下文
怎么做：触发BFC的条件
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
总结
1. 浮动元素（float 不为 none）
2. 绝对定位元素（position 为 absolute 或 fixed）
3. 行内块级元素（display 为 inline-block）
4. overflow值不为visible的元素
5. 弹性元素 （display为flex的元素 或 为inline-flex的直接子元素）
BFC解决了什么问题
- 清除浮动（子元素浮动，高度塌陷，可以给父元素增加display：inlneblock形成BFC，解决高度塌陷）（为什么不用.clearfix)
- 防止margin合并（为元素包裹一个盒子，形成一个独立的BFC空间）
- 某些古老的布局方式会用到（两栏布局）
BFC的缺点：
有副作用
如何解决BFC的副作用
使用最新的display：flow-root来触发BFC
