BFC

Box 是 CSS 布局的对象和基本单位，页面是由若干个 Box 组成的。 元素的类型 和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。

Formatting Context

Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。 Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 为 CC3 中新增。

BFC 布局规则

• BFC 内，盒子依次垂直排列。

• BFC 内，两个盒子的垂直距离由 margin 属性决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠【符合合并原则的 margin 合并后是使用大的 margin】

• BFC 内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，- 右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的 BFC。

• BFC 的区域不会与 float box 重叠。

• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算 BFC 的高度时，浮动元素也参与计算。

如何创建 BFC

• 根元素

• 浮动元素（float 属性不为 none）

• position 为 absolute 或 fixed

• overflow 不为 visible 的块元素

• display 为 inline-block, table-cell, table-caption

BFC 的应用

• 防止 margin 重叠 (同一个 BFC 内的两个两个相邻 Box 的 margin 会发生重叠，触发生成两个 BFC，即不会重叠)

• 清除内部浮动 (创建一个新的 BFC，因为根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算)

• 自适应多栏布局 (BFC 的区域不会与 float box 重叠。因此，可以触发生成一个新的 BFC)