块格式上下文

css2.1中定义

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为visible的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

MDN中的描述

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

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素
• 浮动元素（元素的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、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible的块元素
• display 值为flow-root的元素
• contain值为layout、content或 strict的元素
• 弹性元素（display为 flex或inline-flex元素的直接子元素）
• 网格元素（display为 grid或 inline-grid元素的直接子元素）
• 多列容器（元素的 column-count 或column-width不为auto，包括column-count为 1）
• column-span 为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

总结

BFC就是包住他的所有子元素