BFC原理（BFC的渲染原则）：
- 在bfc这个元素的垂直方向边距不会发生重叠
- bfc的区域不会和浮动元素的box重叠
- bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素；里面的元素也不会影响外面的元素
- 计算bfc高度的时候，浮动元素也会参与计算
如何创建BFC：
- float值不为none
- overfloat：hidden/auto
- 只要position的值不是static或relative
- display是table、table-cell的都可以
BFC的使用场景：
- 解决垂直边距重叠问题：给当前重叠元素添加一个父级，并且设置BFC(overfloat：hidden)
- 解决浮动时，未浮动的元素对浮动元素的重叠问题；给未浮动的元素开启BFC
- 用于清除浮动：当给父级元素设置BFC时，子级元素的浮动元素也会参与到高度计算中来
