清除浮动本身不导致外边距合并，而是暴露原有父子外边距合并：父容器因浮动塌陷无边界，子元素margin-top“漏出”；清除后父容器恢复边界，与子元素margin-top发生标准合并。
清除浮动本身不会“导致”外边距合并，而是让原本被隐藏的父子外边距合并问题暴露出来——父容器之前因浮动塌陷、无边界，子元素的 margin-top 直接“漏”到外部；一旦清除，父容器恢复高度和边界，margin-top 就立刻与父容器上边缘合并。
为什么 clear: both 后子元素 margin-top 看似“消失”了
这不是 margin 被删了，是它和父容器的上边缘发生了标准的外边距合并（margin collapse）。触发条件全满足：父子同属一个 BFC、父容器无 border/padding、子元素是第一个块级子项。
- 常见现象：
h2设了margin-top: 30px，后面跟一个<div class="clearfix"></div>，结果顶部空白没了 - 根本原因：空清除元素没触发 BFC，也不提供物理边界，无法阻断 margin 合并链路
- 注意：这个“消失”只在视觉上成立；用开发者工具检查 computed styles，
margin-top值依然存在
display: flow-root 是最直接有效的修复方式
它同时解决两个问题：包裹浮动子项 + 阻断父子外边距合并。现代浏览器支持良好，无副作用。
- 写法：
.parent { display: flow-root; }，无需额外 HTML 或 hack - 兼容性：Chrome 64+ / Firefox 58+ / Safari 15.4+；老 Safari 可 fallback：
display: flow-root; overflow: hidden; - 对比
overflow: hidden：flow-root不裁剪box-shadow、下拉菜单、position: absolute子项，也不强制创建合成层
为什么 overflow: hidden 不总是安全的选择
它虽能触发 BFC 并阻止 margin 合并，但副作用明显，尤其在交互型布局中容易翻车。
立即学习“前端免费学习笔记（深入）”；
- 会裁剪所有溢出内容：下拉菜单、tooltip、横向滚动条、阴影延伸部分都可能被截断
- 对
position: absolute或fixed子元素，overflow可能完全不生效（取决于 containing block） - 在某些安卓 WebView 或旧 iOS 中，
overflow: auto会意外触发滚动条，干扰 UX
别依赖空清除块来“隔离” margin
加一个 <div style="clear:both"></div> 解决不了 margin 合并，反而可能引入新问题。
- 空清除块自身高度为 0、无 border/padding、未触发 BFC，仍是 margin 合并的“透明通道”
- 若它夹在两个段落之间，上方段落的
margin-bottom和下方段落的margin-top仍会合并 - 真要保留清除语义，至少给它加点“存在感”：
height: 0; line-height: 0; font-size: 0;，或更稳妥地用border-top: 1px solid transparent
真正关键的一点是：BFC 必须由“参与合并链”的那个元素自己触发。想隔断父子 margin，就得在父元素上设 display: flow-root，而不是去调子元素的 padding 或给兄弟元素加 clear —— 后者只是绕开问题，不是解决问题。
