什么是BFC？

BFC(Block Formatting Content) 。 中译： 块级格式化上下文 。

可以认为是元素的一种特性，仅需了解其触发方式和触发后元素展现的特性即可。

注意： 下文将触发了 BFC 特性的元素叫 BFC 容器。

---

触发方式列举如下：

• 浮动元素（元素的 float 不是 none）

• 绝对定位元素（元素的 position 为 absolute 或 fixed）

• 行内块 inline block 元素

• overflow 值不为 visible 的块元素

• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素, 或添加 display: flow-root）

热知识: html 元素默认触发 BFC。

---

触发特性后：

• 元素将是页面中的一块独立渲染区域。

• 区域内元素布局不会影响外部。

• 同一个 BFC 容器 下外边距会发生折叠, 想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

• BFC 可以包含浮动的元素（清除浮动）

• BFC 容器 可以阻止元素被浮动元素覆盖

---

MDN BFC触发

MDN BFC 块级格式化上下文