前言
FC (Formatting Contexts)，格式化上下文，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。CSS2.1中只有BFC和IFC。
什么是BFC？
- BFC（Block Formatting Contexts） 块级格式化上下文。
- 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
如何触发BFC？
- 根元素或其它包含它的元素
- 浮动 float: left/right/inherit
- 绝对定位元素 position: absolute/fixed
- 行内块 display: inline-block
- 表格单元格 display: table-cell
- 表格标题 display: table-caption
- 溢出元素 overflow: hidden/scroll/auto/inherit
- 弹性盒子 display: flex/inline-flex
BFC布局规则
- 同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并。
- 不同的BFC区域之间是互相独立的，互不影响。
- BFC不会与浮动元素重叠。
- 计算BFC的高度时，浮动元素也参与计算。
BFC的应用
1. 使用BFC防止块级元素垂直方向外边距合并。
两个相邻的块级元素垂直方向的外边距会发生合并，让其中一个块级元素触发BFC，此时的两个元素就不属于同一个BFC了，它们的布局互不干扰，垂直方向的外边距就不会发生合并了。
2. 解决父元素高度塌陷问题
父元素不设置高度的情况下，子元素浮动会导致父元素高度塌陷。浮动的元素是BFC区域，把父元素也变为BFC区域则可以识别到内部的BFC区域。
3. 防止元素被浮动元素覆盖（自适应两栏布局）
两个同级的元素，处于标准流中的元素会被浮动元素覆盖，但文本不会被覆盖。
可以让被覆盖的元素触发BFC，则浮动的元素就不再覆盖该元素，可采用该方式实现自适应两栏布局，左边浮动元素宽度固定，右边触发BFC的元素不设置宽度，让其内容自适应宽度。
