CSS：BFC

BFC 的概念

BFC（块级格式化上下文）是 CSS 渲染过程中的一种独立布局环境，它是一块独立的渲染区域，规定了在该区域中，常规流块盒 的布局。内部的元素布局不受外部影响，也不会影响外部元素 。
（注：常规流和标准流一般是一回事）

常规流块盒特点：

• 水平方向上必须撑满包含块，
• 在包含块的垂直方向上依次摆放
• 若外边距无缝相邻，则进行外边距合并
• 无论摆在哪儿，或者高度自动时，都会无视浮动元素（自然也会无视定位元素）

---

BFC 渲染区域：这个区域由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域（触发 BFC）

• 根元素（<html>）。
• 浮动元素（float 不为 none）和绝对定位元素（position 为 absolute 或 fixed）。
• overflow 不为 visible（如 auto、hidden）的块盒。
• display 为 inline-block、table-cell、flex、grid 等。

---

BFC 的特性

1. 内部元素垂直排列 ：BFC 内的块级元素默认垂直排列，间距由 margin 决定。
2. 边距不会重叠 ：属于同一 BFC 的相邻元素 margin 会合并，但不同 BFC 的边距不会合并。
3. 包含浮动元素：计算 BFC 高度时，浮动元素也会参与计算（解决浮动塌陷）。
4. 隔离外部浮动：BFC 区域不会与外部浮动元素重叠。

---

BFC 的常见应用

解决浮动塌陷

父元素未设置高度时，子元素浮动会导致父元素高度塌陷。通过触发父元素的 BFC 可解决：

.parent {
  overflow: hidden; /* 触发 BFC */
}

避免边距合并

两个相邻元素的 margin 会合并，通过包裹 BFC 容器隔离：

<div style="overflow: hidden;">
  <p style="margin: 20px;">内容</p>
</div>

实现自适应两栏布局

利用 BFC 区域不与浮动元素重叠的特性：

.left {
  float: left;
  width: 200px;
}
.right {
  overflow: hidden; /* 触发 BFC */
}

注意事项

• 过度使用 BFC 可能导致布局复杂化（如频繁使用 overflow: hidden 会隐藏溢出内容）。
• 现代布局方案（Flexbox、Grid）可替代部分 BFC 场景，但需考虑兼容性。

BFC 是 CSS 布局的核心机制之一，合理使用能有效解决多种布局问题。