深入理解块级格式化上下文(BFC)

一、 什么是BFC

块级格式化上下文，Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
BFC的布局规则如下：

1. 内部的盒子会在垂直方向，一个一个地放置
2. BFC是页面上的一个隔离的独立容器
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠
4. 计算BFC的高度时，浮动元素也要参与计算
5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
6. BFC的区域不会与float重叠

创建了BFC的元素中的所有内容都会被包含在该BFC中。
BFC对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在他前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

下列方式会创建BFC：

1. 根元素或包含根元素的元素，即body根元素
2. 浮动元素，即float属性值不为none（元素的position为absolute或fixed）
3. 行内块元素（元素的display为inline-block）
4. 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
5. 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
6. 匿名表格单元格元素(或者元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)
7. overflow的值不为visible的元素
8. display值为flow-root`的元素
9. contain值为layout、content或strict`的元素
10. 弹性元素(display为flex或inline-flex元素的直接子元素)
11. 网格元素(display为grid或inline-grid元素的直接子元素)
12. 多列容器（元素的colunm-count或column-width不为auto，包括column-count为1）
13. column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器当中

二、BFC的特性及应用

两个相邻的普通流中的块元素垂直方向的margin会发生折叠