描述块格式化上下文 (BFC) 及其工作原理。

块格式化上下文 (BFC) 是网页视觉 CSS 渲染的一部分，其中会布局块级盒子。浮动、绝对定位的元素、inline-blocks、table-cells、table-caption 以及 overflow 值不为 visible 的元素（除非该值已传播到视口）会建立新的块格式化上下文。

了解如何建立块格式化上下文非常重要，因为如果不这样做，包含框将无法包含浮动子元素。这类似于折叠外边距，但更隐蔽，因为您会发现整个盒子以奇怪的方式折叠。

BFC 是满足以下至少一个条件的 HTML 盒子：

• float 的值不为 none。
• position 的值既不是 static 也不是 relative。
• display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex、grid 或 inline-grid。
• overflow 的值不为 visible。

在 BFC 中，每个盒子的左外边缘都与包含块的左边缘接触（对于从右到左的格式，右边缘接触）。

BFC 中相邻块级盒子之间的垂直外边距会折叠。阅读更多关于折叠外边距。