浮动本身不会导致 margin 折叠，而是因父容器塌陷且未形成 bfc，致其 margin 与兄弟元素 margin 合并；display: flow-root 是最稳妥修复方式，可创建 bfc 隔离内外 margin，兼容现代浏览器，语义明确且无裁剪风险。
为什么浮动会让父容器和兄弟元素的 margin 折叠？
根本不是“浮动导致折叠”，而是浮动让父容器塌陷后，它自身又没形成 BFC，结果它的 margin-top/bottom 直接和相邻兄弟块级元素“见面”了——这时候才触发标准的 margin collapse 规则。你看到的“叠加过大”或“间距消失”，其实是父容器的 margin 和上/下兄弟元素的 margin 合并成了一个值。
display: flow-root 是最稳妥的修复方式
给浮动子元素的直接父容器加 display: flow-root，就能让它创建 BFC，彻底隔离内外 margin 环境：
- 它不会裁剪
position: absolute子元素、阴影或动画溢出内容 - 不改变盒模型尺寸，也不影响内部 float 行为
- 语义明确：就是“我要当一个流根容器”
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+；老 Safari 可 fallback：
display: flow-root; overflow: hidden;
overflow: hidden 能用但有隐藏风险
overflow: hidden 确实能触发 BFC，但它会裁剪所有溢出内容：
- 下拉菜单、tooltip、
box-shadow延伸部分、横向滚动条都可能被截断 - 如果父容器本身是
position: fixed或absolute，overflow可能完全不生效 - 别用
overflow: auto—— 在某些安卓 WebView 或旧 iOS 上会意外触发滚动条
clear: both 不能解决 margin 折叠
在浮动元素后加 clear: both（不管是伪元素还是空 div），只解决父容器高度塌陷，不解决 margin 折叠：
- 父容器依然没有 BFC，它的
margin-bottom还是会和下一个div的margin-top合并 -
clear只影响紧邻的后续块级元素，对内联文本、flex 子项无效 - 嵌套多层浮动时，逐层加
clear容易失控，不如统一在各父容器上设display: flow-root
真正容易被忽略的是：BFC 必须由“参与 margin 合并链”的那个元素自己触发。想隔断父子折叠，就得在父元素上设 display: flow-root，而不是去调子元素的 padding 或 border。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
