BFC（Block Formatting Context）：块级格式化上下文
BFC 是一个独立渲染区域，只有 Block-Level Box 参与，规定了 Block-Level Box 内部区域如何布局
BFC 的生成
满足下列条件之一，会生成 BFC
- 根元素
- float: left | right
- overflow: hidden | auto | scroll
- display: inline-block | table-cell | table-caption | table
table 会默认生成一个匿名的 table-cell，因此 table 也会生成新的 BFC
- position: absolute | fixed
BFC 的约束规则
- 内部的 Box 会在垂直方向上一个接一个的放置
- 垂直方向上的距离由 margin 决定（属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（塌陷），与方向无关）
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明 BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界）
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时，浮动子元素也参与计算
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然（计算 BFC 的高度时，浮动元素也参与计算）