BFC

🔧 BFC 是什么？

BFC 是页面中的一块独立的渲染区域，它内部的元素布局不会影响外部，也不会被外部影响。当一个元素形成 BFC 后：

• 它内部的块级元素会在垂直方向上一个接一个排列。

• BFC 区域不会与浮动元素重叠（可以用来包住浮动元素，从而避免“高度塌陷”）。

• BFC 的子元素的外边距不会与 BFC 外的元素的外边距发生合并（解决 margin 重叠问题）。

它影响元素如何在页面上布局，尤其是处理浮动元素、外边距重叠、清除浮动等问题时非常关键。

触发 BFC 的方式（常见几种）：

.box {
  overflow: hidden | auto | scroll;
  display: flow-root;
  float: left | right;
  position: absolute | fixed;
}