今天，我们要讲的是 BFC 的相关知识。
什么是 BFC？
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
创建 BFC
- 根元素或包含根元素的元素
- 浮动元素 float ＝ left | right 或 inherit（≠ none）
- 绝对定位元素 position ＝ absolute 或 fixed
- display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
- overflow ＝ hidden | auto 或 scroll (≠ visible)
BFC 特性
- BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
- 盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
- 在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
- BFC 区域不会和 float box 发生重叠。
- BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
Demo 展示
BFC 区域不会和 float box 发生重叠：
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了（清除浮动）：
在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠：