什么是BFC
- BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
- 可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
BFC的规则
- 内部的Box会在垂直方向，从顶部一个接一个地放置
- 垂直方向上的距离由margin决定（防止margin重叠）
- 计算高度时浮动也参与计算（清除浮动）
- BFC的区域不会与float的元素区域重叠（防止文字环绕）
如何创建BFC
- 根元素
- 绝对定位：absolute、fixed
- float不为none
- overflow不为visible
- display为flex、inline-block、table-cell
