一、BFC 是什么？
BFC 全称：
Block Formatting Context（块级格式化上下文）
你可以把它理解成：
一个独立的布局环境
里面的元素布局不会影响外部
外部元素也不会影响内部
可以理解为：
一个“隔离的盒子区域”
二、BFC 的核心特性（必须会）
BFC 有 3 个最重要的特性：
① 内部元素不会影响外部
BFC 内部怎么排版，不会干扰外部布局。
② 可以包含浮动元素（解决高度塌陷 ⭐）
正常情况下：
父元素不会计算浮动子元素高度
但如果父元素形成 BFC：
父元素会包含浮动子元素
这就是清除浮动的本质。
③ 阻止 margin 重叠（重点）
正常情况下：
两个相邻块级元素上下 margin 会合并
但如果其中一个形成 BFC：
margin 不会重叠
三、如何触发 BFC？
面试必背 👇
只要满足以下任意一个条件，就会形成 BFC：
1️⃣ overflow 不为 visible（最常用）
overflow: hidden;
overflow: auto;
overflow: scroll;
这是最常见的触发方式。
2️⃣ float 不为 none
float: left;
float: right;
浮动元素本身会形成 BFC。
3️⃣ position 为绝对定位
position: absolute;
position: fixed;
4️⃣ display 为以下值
display: inline-block;
display: table-cell;
display: flex;
display: grid;
⚠️ flex 和 grid 容器天然是 BFC。
四、经典应用场景（面试重点）
场景 1：清除浮动（最常考 ⭐⭐⭐）
问题：
<div class="parent">
<div class="child"></div>
</div>
.child {
float: left;
height: 100px;
}
现象：
parent 高度塌陷
解决：
.parent {
overflow: hidden;
}
原理：
触发 BFC → 包含浮动元素
场景 2：解决 margin 重叠
正常情况：
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 50px;
}
结果：
间距 = 50px（不是 100px）
解决：
.box2 {
overflow: hidden;
}
形成 BFC 后：
间距 = 100px
场景 3：防止文字环绕浮动元素
如果有：
img {
float: left;
}
后面的文本会环绕图片。
解决：
.text {
overflow: hidden;
}
让文本形成 BFC，就不会环绕。
五、BFC 本质总结（进阶理解）
BFC 的核心作用可以总结为三句话：
1. 隔离布局
2. 包含浮动
3. 阻止 margin 重叠
六、面试标准回答模板
你可以这样回答：
BFC 是块级格式化上下文，是一个独立的布局环境。
它的特点是：
- 内部元素不会影响外部
- 可以包含浮动元素
- 可以阻止 margin 重叠
触发方式包括：
- overflow 不为 visible
- float 不为 none
- position 为 absolute / fixed
- display 为 inline-block、flex、grid 等
常见应用场景是清除浮动、解决高度塌陷、解决 margin 重叠。
七、结合你实际开发场景（比如后台系统）
在你做：
- 表格布局
- 左右浮动布局
- 卡片组件
- Ant Design 自定义布局
你很可能写过：
.clearfix {
overflow: hidden;
}
