什么是 BFC
BFC（Block Formatting Context）即块格式化上下文，是页面中的一块渲染区域，拥有自己的渲染规则。BFC 内部的元素与外部元素互不影响。
触发 BFC 的条件
- float 不为 none
- position 为 absolute 或 fixed
- display 为 inline-block、table-cell、flex、grid 等
- overflow 不为 visible（这就是 overflow 创建 BFC 的原因）
BFC 的应用场景
- 解决 margin 塌陷问题
- 清除浮动
- 阻止元素被浮动元素覆盖