display: flow-root 是唯一真正同时解决清除浮动和阻断外边距合并的方案，它创建 bfc 包裹浮动并天然阻断父子、兄弟及空元素间的 margin collapse，且无裁剪等副作用。
清除浮动本身不阻断外边距合并，它只解决父容器高度塌陷；真正让 margin-top “消失”的，是父子间缺乏物理隔离，而清除动作恰好让这个隐藏问题暴露出来。
clear: both 为什么不能阻止 margin-collapse
给兄弟元素加 clear: both（比如一个空 <div class="clearfix"></div>）只影响后续元素的定位流，对当前父容器的边界状态毫无作用：
- 该清除元素若为空、无
border、无padding、未触发 BFC，则它本身就是一个“透明通道”，上下相邻块级元素的margin-top和margin-bottom仍会穿过它合并 -
clear属性不改变盒模型类型，也不创建新的格式化上下文，因此不满足阻断 margin collapse 的任一条件 - 常见错觉：以为“清了浮动=布局稳了”，实则只是把浮动撑开的高度恢复了，父子 margin 合并照常发生
overflow: hidden 清浮动后 margin 还在合并？
overflow: hidden 确实能触发 BFC 并包裹浮动，但它只隔离“内部浮动”和“外部内容”，并不自动阻断内部子元素之间的垂直 margin 合并：
- 若父容器设了
overflow: hidden，但内部有多个<p></p>元素，它们之间仍会因相邻而发生 margin collapse - 若父容器无
border或padding，第一个子元素的margin-top仍会与父容器上边缘合并——因为overflow触发 BFC 是为了包含浮动，不是为阻断父子 margin - 副作用明显：裁剪
box-shadow、遮挡position: absolute下拉菜单，旧版 Safari 中还可能闪烁
display: flow-root 是唯一真正同时解决两个问题的方案
display: flow-root 是专为这类场景设计的现代属性，它既创建独立 BFC 包裹浮动，又天然阻断所有参与该上下文的 margin collapse：
- 它不依赖
border或padding占位，不增加盒模型尺寸，也不裁剪内容 - 它作用于父容器自身，直接切断父子、兄弟、空元素三类 margin collapse 场景
- 兼容性已足够：Chrome 64+ / Firefox 58+ / Safari 15.4+（2026 年绝大多数项目可放心用）
- 注意：BFC 隔离是局部的——
.container { display: flow-root; }只管住它内部，不影响它和外部兄弟容器之间的 margin 合并
真正容易被忽略的是：margin collapse 不是“某个属性开了就消失”的开关，而是由整个盒树中“有没有分隔物”决定的链式行为。哪怕你用了 flow-root，如果孙元素的父层没建 BFC，它的 margin-top 仍可能一路透到曾祖容器。逐层检查参与合并的节点，比盲目加清除更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
