BFC 规定了内部的 Block Box 如何布局。

定位方案：

• 内部的 Box 会在垂直方向上一个接一个放置。
• Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
• 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
• BFC 的区域不会与 float box 重叠。
• BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

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

满足下列条件之一就可触发 BFC：

• 1、根元素，即 html
• 2、float 的值不为 none（默认）
• 3、overflow 的值不为 visible（默认）
• 4、display 的值为 inline-block、table-cell、table-caption
• 5、position 的值为 absolute 或 fixed