什么是BFC：
- 就是当在设计页面的时候，使用浮动后盒子计算不到高度，会导致高度塌陷，还有两个块级盒子都设置了margin，会使盒子重叠，原因就是元素之间的影响，所以就有了BFC，就是块级格式化上下文，是页面中的一块渲染区域，一套属于自己的渲染规则，就是可以理解为是一个大箱子，箱子内部不论如何都不会影响外部
触发条件：
- 浮动元素:float值除none以外的值
- 绝对定位元素:position为absolute或fixed
- display为inline-block、table-cell、flex、inline-flex、table-caption
- overflow除了visible以外的值（hidden、auto、scroll）
- body根元素
应用场景：
- 清浮动
- 外边距重叠
- 可以用来实现左边宽度固定 右边自适应的效果
