什么是BFC？

W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。

BFC的触发条件

1. 根元素html

2. float不为none
3. overflow不为visible

4. position为fixed或absolute

5. display为inline-block
6. display为flex或inline-flex
7. display为grid或inline-grid

8. display为table相关属性

BFC的渲染规则

1. BFC垂直方向边距重叠
2. BFC不会和浮动元素的box重叠
3. BFC是一个独立的容器，外面的元素不会影响到里面的元素
4. 计算BFC高度的时候浮动元素也会参与计算