前言
在 CSS 布局中，你是否遇到过“子元素浮动导致父元素高度消失”或者“两个盒子的垂直外边距莫名其妙重叠”？这些现象都指向了一个核心概念——BFC（Block Formatting Context，块级格式化上下文） 。理解 BFC，就掌握了控制 CSS 布局行为的底层逻辑。
一、 什么是 BFC？
BFC 是页面上的一个独立渲染区域。你可以把它想象成一个隔离的容器。
- 核心规则：容器内部的子元素布局不会影响到外面的元素；反之，外面的元素也不会影响到容器内部。
二、 如何触发 BFC？（激活条件）
只要元素满足以下任一条件，就会触发 BFC 特性：
float的值不是none。position的值是absolute或fixed。display的值是inline-block、flex、inline-flex、table-cell或table-caption。overflow的值不是visible（如hidden、auto、scroll）。
三、 BFC 的三大实战应用
1. 解决子元素浮动导致的“父元素高度坍塌”
当子元素设置了浮动，父元素往往无法计算其高度。
- 原理：BFC 容器在计算高度时，内部的浮动元素也会参与计算。
- 做法：给父元素设置
overflow: hidden触发 BFC，父元素即可“感知”到浮动子元素的高度。
2. 解决兄弟元素的“垂直外边距重叠 (Margin Collapse)”
在标准流中，上下相邻的两个块级元素，其垂直方向的 margin 会取最大值而非相加。
- 原理：属于同一个 BFC 的两个相邻 Box 的垂直外边距会发生重叠。
- 做法：将其中一个盒子包裹在新的 BFC 容器中，打破“属于同一个 BFC”的条件，从而解决重叠。
3. 实现自适应两栏布局（解决覆盖问题）
当一个元素浮动，另一个标准流元素会钻到它底下。
- 原理：BFC 区域不会与浮动盒子的区域重叠。
- 做法：将受影响的元素设置为 BFC（如
overflow: hidden），它会自动避开浮动元素，形成完美的左右分栏。
四、 总结：BFC 就像一个“结界”
- 如果你想让父元素包住浮动的孩子，请开 BFC。
- 如果你想让两个盒子不要重叠外边距，请开 BFC 分隔它们。
- 如果你想让文字或盒子避开旁边的浮动元素，请开 BFC。
