清除浮动后父元素margin-top“消失”实为外边距折叠，因clear:both伪元素未触发bfc致父子/兄弟margin合并；display:flow-root是最优解，既创建bfc阻断合并又无副作用。
清除浮动后父元素margin-top“消失”其实是外边距折叠
这不是清除操作本身搞坏了 margin，而是清浮动让原本被遮掩的 垂直外边距合并（margin collapse） 暴露出来。典型表现是：父容器设了 margin-top: 40px，但视觉上它和上一个兄弟元素之间只有 24px，甚至紧贴着——因为它的上边距和前一个块的下边距“叠”在一起取了最大值。
关键点在于：clear: both 的伪元素（如 ::after）如果为空、无高度、未触发 BFC，就无法打断这个合并链路。它成了“透明通道”，让父子、兄弟间的 margin 直接联通。
- 检查 computed 样式里父元素的
margin-top是否显示为0—— 如果是，说明已被合并，不是没写 - 不要只盯着清除代码有没有加对，先确认父容器是否形成了独立的 BFC 边界
- 旧项目中用
zoom: 1或overflow: hidden的老方案，本质都是在补 BFC，不是在“清浮动”
display: flow-root 是最干净的修复方式
display: flow-root 是专为创建 BFC 设计的属性，现代浏览器全覆盖（Chrome 64+、Firefox 58+、Safari 15.4+），IE 不支持但已退出主流。它既能包裹浮动子项防塌陷，又能天然阻断内部 margin 向外合并。
相比 overflow: hidden，它没有裁剪副作用；相比 display: table，它不改变盒模型语义；相比 padding-top: 1px，它不引入额外空白。
- 直接给浮动容器加：
.container { display: flow-root; } - 如果父容器本身也是浮动的（比如三栏布局中的中间栏），得先确保它自己被清除或也包裹进更高层 BFC，否则
flow-root不生效 - Vue/React 组件中建议抽成 utility class，避免每个地方重复写
为什么 overflow: hidden “顺便”修好了 margin
overflow: hidden 能修复，是因为它强制创建了 BFC。BFC 容器会：
- 包含浮动子项，解决高度塌陷
- 隔离内部 margin，不让它和外部兄弟元素发生合并
- 让后续块级元素真正“感知”到浮动内容的存在，
margin-top才有可靠参考系
但它有真实代价：
- 可能裁剪
box-shadow、position: absolute子元素的溢出部分（比如 Tooltip 箭头、下拉菜单） - iOS Safari 在某些缩放或 touch 场景下会抑制弹性滚动
- 语义模糊：
overflow本意是控制溢出行为，不是为了造 BFC
若必须用它，优先选 overflow: clip（现代浏览器支持），副作用更小。
别忽略清除元素自身的塌陷问题
很多清除方案用空的 ::after，比如 content: ""; display: table; clear: both;。这种元素默认高度为 0，且未触发 BFC，极易成为 margin 合并的“漏网之鱼”。
哪怕你已经给父容器加了 flow-root，如果清除块自身塌陷，它和后面兄弟元素之间的 margin 仍可能合并。
- 给清除元素加
min-height: 1px是最轻量有效的打断方式 - 或者改用
height: 0; font-size: 0; line-height: 0;配合clear: both，确保它不参与布局流但又不塌陷 - 更彻底的做法：不用清除，直接换 Flex 或 Grid 布局——它们天然不塌陷，也不触发 margin 合并
真正难处理的从来不是“怎么清浮动”，而是“谁来当那个可靠的 BFC 边界”。边界一旦模糊，margin 就会在父子、兄弟、内外之间自由穿行，而开发者工具里永远只显示“computed margin: 0”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
