BFC原理示意图 → 独立渲染区域，内外互不干扰
一、什么是BFC？
Block Formatting Context（块级格式化上下文）
简单说：
一个独立的渲染区域，内部元素怎么布局，都不会影响外部。
专业解释：
BFC 是CSS渲染的隔离容器，内部规则独立，外部无法影响内部，内部也不会干扰外部。
二、触发BFC的条件（必背5个）
满足任意一个，就会生成BFC
- 1. html 根元素（天生BFC）
- 2. float 不为 none（left/right）
- 3. position 为 absolute / fixed
- 4. display 为 inline-block / flex / grid / table-cell
- 5. overflow 不为 visible（hidden / auto / scroll）
👉 最常用最简单：overflow:hidden
三、BFC 3大经典应用场景
1. 解决 margin 上下重叠 问题
👉 问题：两个相邻盒子margin会合并，取最大值
👉 解决：给其中一个包一层BFC容器
<div class="bfc">
<div class="box"></div>
</div>
<div class="box"></div>2. 解决 父元素高度塌陷（float导致）
👉 问题：子元素浮动，父元素高度变成0
👉 解决：给父元素开启BFC（overflow:hidden）
.parent { overflow: hidden; }
.child { float: left; }3. 阻止 浮动元素覆盖 普通元素
👉 问题：左边浮动，右边文字被覆盖
👉 解决：给右边元素开启BFC
四、一句话总结（面试满分答案）
BFC 是独立隔离的渲染区域，
触发后可以解决margin重叠、清除浮动、防止覆盖。
五、深挖加分（面试官爱问）
- 1. BFC 会改变元素特性吗？
不会，只是创建独立渲染规则 - 2. 为什么 overflow:hidden 能清除浮动？
因为触发了BFC，计算高度时会包含浮动子元素 - 3. BFC 和 普通容器区别？
BFC 内部布局完全独立，不会和外部发生干扰
10秒速记
✅ BFC = 独立渲染区域
✅ 触发：overflow:hidden、float、定位、flex、inline-block
✅ 用途：解决margin重叠、高度塌陷、防止浮动覆盖
✅ 最简单用法：给父元素加 overflow:hidden
