用display: flow-root是当前最可靠、副作用最小的解法，它专为创建BFC设计，不裁剪内容、不触发滚动、不影响定位；必须作用于参与重叠的父元素自身，而非子元素或仅添加类名，且在flex/grid容器中无效。
直接说结论：用 display: flow-root 是当前最可靠、副作用最小的解法，它专为创建 BFC 设计，不裁剪内容、不触发滚动、不影响定位。
为什么 overflow: hidden 不该是首选
它确实能触发 BFC，但副作用真实存在：
-
overflow: hidden会裁剪所有溢出内容——box-shadow、position: absolute的下拉菜单、tooltip 全部被截断 - 某些旧版 Safari 中，配合
transform或动画可能引发渲染闪烁 - 给两个兄弟元素都加
overflow: hidden，它们仍在同一父 BFC 内，margin 依然合并 - 语义错位：
overflow本意是控制溢出行为，不是防重叠；调试时容易卡在“为什么弹层不见了”
display: flow-root 必须作用在参与重叠的父元素上
父子 margin 塌陷的本质是子元素的 margin-top 向上“穿透”了父容器边界。打断它的关键，是让父容器自身成为独立 BFC 容器：
- ✅ 正确：
.parent { display: flow-root; }—— 父容器创建新 BFC，子元素的margin-top被拦在里面 - ❌ 错误：
.child { display: flow-root; }—— 子元素自己建 BFC 没用，塌陷发生在父与子之间，不是子与孙之间 - ❌ 错误：只给父容器加
class="bfc"却忘了写 CSS 规则 —— 类名本身不触发 BFC，必须有对应样式 - ⚠️ 注意：若父容器已设
display: flex或display: grid，再加flow-root无效（flex/grid 自身已创建格式化上下文）
兄弟元素 margin 合并怎么破
两个垂直排列的 div，一个设 margin-bottom: 20px，一个设 margin-top: 30px，实际间距只有 30px。这不是计算错误，是规范取大值：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐方案：统一只设
margin-bottom，再用:last-child { margin-bottom: 0; }清末尾 - ✅ 隔离方案：把第二个元素包进
<div style="display: flow-root;"></div>—— 它们就分属不同 BFC，不再合并 - ❌ 无效操作：给两个兄弟元素都加
display: flow-root—— 它们仍共处同一父 BFC，合并照常发生 - ? 替代思路：改用
gap（Flex/Grid 布局），它天然不参与 collapse，且语义更明确
真正容易被忽略的是：BFC 是局部屏障，不是全局开关。你在某个父容器上加了 display: flow-root，只隔离它内部的父子/兄弟重叠，它和外部其他元素之间仍可能重叠。别指望加一层就一劳永逸。
