CSS：块格式化上下文(BFC)

块格式化上下文是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

块格式化上下文(BFC)的创建

满足以下条件将创建块格式化上下文：

• 根元素（）
• 浮动元素（float 值不为 none）
• 绝对定位元素（position 值为 absolute 或 fixed）
• 行内块元素（display 值为 inline-block）
• 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）
• 表格标题（display 值为 table-caption，HTML 表格标题默认值）
• 匿名表格单元格元素（display 值为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或 inline-table）
• overflow 值不为 visible、clip 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
• 多列容器column-span 值为 all 的元素始终会创建一个新的 BFC

块格式化上下文(BFC)的布局规则

• 在块格式化上下文中，从包含块的顶部开始，一个接一个地垂直排列框。
• 两个同级框之间的垂直距离由“margin”决定。块格式上下文中相邻块级别框之间的垂直边距折叠。
• 在块格式化上下文中，每个框的左外边缘与包含块的左边缘接触（对于从右到左的格式化，右边缘接触）。即使在存在浮点数的情况下也是如此（尽管框的行框可能会由于浮点数而收缩），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会因为浮点数而变得更窄）。

块格式化上下文(BFC)的作用

1. 清除浮动的影响
   BFC元素可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。
2. 清除边距重叠
   BFC元素是不可能发生margin重叠的，因为margin重叠是会影响外面的元素的