FC(Formatting Context)
FC指格式化上下文，FC会产生一个渲染区域，这个区域有自己的渲染规则。它决定了子元素如何定位、和区域外的其他元素的关系、相互作用。
CSS2.1规定了BFC(Block Formatting Context)和IFC(Inline Formatting Context)
CSS3.0新增GFC(Grid Formatting Context)和FFC(Flex Formatting Context)
BFC(Block Formatting Context)
块级格式化上下文，它是一个独立的渲染区域，仅有Block-level box 参与，它规定了Block-leve box 如何布局，并不会影响这个区域外的元素。
BFC生成条件
- 根元素
- float的值不为none
- overflow不为visible
- display的值为inlie-block,table-cell,table-caption
- position为absolute,fixed
BFC渲染规则
- 子元素会在垂直方向上一个个排列
- 子元素的margin会发生重叠，margin值由最大的值决定
- 每个子元素的左外边距与包含块的左边界接触，除了position为absolute和fixed可以超出包含块。
- BFC的区域和float的元素重叠
- 计算BFC高度时，浮动元素也参与计算
- BFC是一个独立容器，不会影响外界元素，外界元素影响不了容器
BFC应用
- 防止margin重叠
- 防止浮动塌陷
- 自适应布局
因为BFC不会影响到外部的元素，所以当内部元素宽/高度总和超出包含块的尺寸时，内部元素会被压缩。
