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
- 如何创建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)
欢迎大家补充更多关于BFC的知识
