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

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

---

BFC的核心特性 阻止外边距合并：相邻元素的垂直外边距默认会合并，但BFC内部的外边距不会与外部合并。包含浮动元素：BFC会计算浮动元素的高度，避免父容器高度塌陷。阻止元素被浮动覆盖：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，可有效控制复杂布局。