CSS中块级格式化上下文（BFC）详解

CSS中的 BFC （Block Formatting Context，块级格式化上下文）是页面渲染时的一个独立布局区域，内部元素的布局不会影响外部元素。以下是BFC的核心特性、创建方式及示例说明：

---

BFC的核心特性

1. 阻止外边距合并：相邻元素的垂直外边距默认会合并，但BFC内部的外边距不会与外部合并。
2. 包含浮动元素：BFC会计算浮动元素的高度，避免父容器高度塌陷。
3. 阻止元素被浮动覆盖：BFC区域不会与浮动元素重叠，而是自适应剩余空间。

---

创建BFC的常见方法

• 设置 overflow 非 visible（如 hidden、auto）。
• 设置 float 非 none。
• 设置 position 为 absolute 或 fixed。
• 设置 display 为 inline-block、table-cell、flex 等。

---

示例说明

1. 阻止外边距合并

未使用BFC时 ：

两个相邻div的外边距会合并为单个较大值。

<div class="box">Box 1</div>
<div class="box">Box 2</div>

.box { margin: 20px 0; }

效果：两个div间距为20px（合并后）。

使用BFC后 ：

通过包裹一个BFC容器，阻止外边距合并。

<div class="bfc-container">
  <div class="box">Box 1</div>
</div>
<div class="box">Box 2</div>

.bfc-container { overflow: hidden; }
.box { margin: 20px 0; }

效果：两个div间距为40px（20px + 20px）。

---

2. 包含浮动元素

未使用BFC时 ：

父容器高度塌陷，无法包裹浮动子元素。

<div class="parent">
  <div class="float-child">浮动元素</div>
</div>

.float-child { float: left; height: 100px; }
.parent { border: 2px solid red; }

效果：父容器高度为0，边框坍缩成一条线。

使用BFC后 ：

父容器触发BFC，正确计算高度。

.parent { overflow: hidden; }

效果：父容器高度为100px，包裹住浮动子元素。

---

3. 避免元素被浮动覆盖

未使用BFC时 ：

普通流元素会环绕浮动元素。

<div class="float-left"></div>
<div class="content">内容区域...</div>

.float-left { float: left; width: 200px; height: 100px; }
.content { background: yellow; }

效果：content的内容环绕在浮动元素右侧。

使用BFC后 ：

内容区域独立布局，占据剩余空间。

.content { overflow: hidden; }

效果：content形成两栏布局，宽度自适应剩余空间，不与浮动元素重叠。

---

总结

BFC通过隔离布局环境，解决了外边距合并、浮动元素高度塌陷及元素覆盖等问题。灵活使用 overflow、float 等属性触发BFC，可有效控制复杂布局。