BFC（Block Formatting Context，块级格式化上下文）是 CSS 中一个重要的渲染概念，它是页面中一个独立的渲染区域，内部元素的布局不会影响外部元素，反之亦然。理解 BFC 对于解决常见的布局问题（如浮动元素影响、外边距合并等合并等）至关重要。
一、BFC 的核心特性
-
独立性：BFC 是一个隔离的容器，内部元素的布局不会干扰外部元素，外部布局也不会影响 BFC 内部。
-
规则性：BFC 内部的块级元素按照 “垂直方向依次排列” 的规则布局（即每个块级元素占满一行，上下相邻）。
-
约束性：
- BFC 内部元素的外边距（margin）会在垂直方向上合并，但不会与外部元素的外边距合并。
- BFC 的区域不会与浮动元素（float）的区域重叠。
- BFC 会包含内部的浮动元素（即能清除浮动，解决 “父元素高度塌陷” 问题）。
二、如何触发 BFC？
满足以下条件之一的元素会自动成为 BFC 容器：
- 根元素（
<html>，整个页面默认是一个 BFC）。 - 浮动元素（
float: left或float: right，非none）。 - 定位元素（
position: absolute或position: fixed）。 - 行内块元素（
display: inline-block）。 - 弹性容器（
display: flex或display: inline-flex，容器本身是 BFC）。 - 网格容器（
display: grid或display: inline-grid，容器本身是 BFC）。 - 溢出处理（
overflow: hidden、overflow: auto或overflow: scroll，非visible）。 - 其他特殊值（如
display: flow-root，专门为创建 BFC 设计，无副作用）。
三、BFC 的实际应用场景
BFC 的核心价值在于 “隔离” 和 “约束”，以下是常见的实际用途：
1. 解决浮动元素导致的父元素高度塌陷
当父元素的子元素全部浮动时，父元素会失去高度（因为浮动元素脱离文档流），而 BFC 容器会包含内部的浮动元素，从而撑起父元素高度。
<div class="parent"> <!-- 父元素默认不触发 BFC，高度塌陷 -->
<div class="child"></div> <!-- 浮动元素 -->
</div>
/* 触发父元素的 BFC，使其包含浮动子元素 */
.parent {
overflow: hidden; /* 触发 BFC */
border: 2px solid #f00;
}
.child {
float: left;
width: 100px;
height: 100px;
background: #0f0;
}
2. 阻止相邻元素的外边距合并
垂直方向上相邻的块级元素，其外边距会自动合并（取较大值）。将其中一个元素放入 BFC 容器中，可阻止合并。
<div class="box1">盒子1</div>
<div class="bfc-container"> <!-- BFC 容器 -->
<div class="box2">盒子2</div>
</div>
.box1 {
height: 50px;
margin-bottom: 20px; /* 下外边距 */
background: #f00;
}
.box2 {
height: 50px;
margin-top: 30px; /* 上外边距 */
background: #0f0;
}
.bfc-container {
overflow: hidden; /* 触发 BFC */
}
效果：box1 和 box2 的外边距不会合并（总间距为 20+30=50px，而非合并后的 30px）。
3. 避免浮动元素覆盖其他元素
当一个元素浮动时，可能会覆盖后面的非浮动元素。将非浮动元素放入 BFC 容器中，可阻止被覆盖（BFC 区域不与浮动元素重叠）。
<div class="float-box"></div> <!-- 浮动元素 -->
<div class="normal-box"></div> <!-- 非浮动元素，可能被覆盖 -->
.float-box {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
.normal-box {
height: 200px;
background: #0f0;
overflow: hidden; /* 触发 BFC，避免被浮动元素覆盖 */
}
效果：normal-box 会自动避开 float-box，不会被覆盖。
四、总结
BFC 本质是一个 “隔离的渲染区域”，其核心作用是：
-
包含内部浮动元素（解决高度塌陷）；
-
阻止外边距合并；
-
避免与浮动元素重叠。
在实际开发中，overflow: hidden（简单但需注意内容溢出）和 display: flow-root（无副作用，推荐）是触发 BFC 的常用方式。理解 BFC 能帮助我们更清晰地控制元素布局，解决各类常见的 CSS 布局问题。
