BFC（Block Formatting Context）即块级格式化上下文
- 开启bfc的区域，是一块独立的渲染区域
- 隔绝了内部与外部的关系，不会相互干扰
开启bfc能解决什么问题？
- 开启bfc，其子元素不会在发生margin塌陷问题，不会和他的子元素发生margin合并问题
- 开启bfc，就算子元素浮动，高度也不会坍塌（高度计算包括浮动元素）
- 开启bfc，不会产生被其他浮动元素覆盖问题
触发BFC的条件包含不限于：
- 根元素，即HTML元素
- 浮动元素：float值为left、right
- overflow值不为 visible，为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
