display: flow-root能阻止margin折叠，因为它强制父容器创建新BFC，隔离子元素垂直外边距，避免父子及兄弟间margin合并，且无裁剪副作用，兼容现代浏览器。
display:flow-root为什么能阻止margin折叠
因为它强制父容器创建一个新的BFC（块级格式化上下文），而BFC边界天然隔离内部子元素的垂直外边距——子元素的margin-top不再能“穿透”到父容器的上边界，兄弟元素的margin-bottom和margin-top也不再合并。
关键不是“隐藏”或“覆盖”，而是重建布局上下文：只要父元素自身属于一个独立BFC，它和子元素就不再共享同一套外边距合并规则。
- 必须加在**参与折叠的父容器上**，写在子元素或隔壁兄弟元素上无效
- 不依赖border/padding/content等物理隔离层，语义更纯粹
- 不会改变盒尺寸（
box-sizing照常生效），也不会影响position: absolute子元素定位
和overflow:hidden比有什么区别
overflow: hidden也能触发BFC，但它是“副作用式”方案：display: flow-root是专为此设计的display值，没有裁剪风险。
-
overflow: hidden会静默裁剪所有溢出内容：下拉菜单、tooltip、box-shadow延伸部分、position: absolute超出容器的区域全被截断 -
overflow: auto可能在缩放、高DPI或某些断点下无故出现滚动条 -
display: flow-root在Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+中稳定支持，无渲染副作用
实际怎么用：一行代码生效的写法
直接给父容器加样式即可，不需要改HTML结构或子元素样式：
.parent {
display: flow-root;
}
- 适用于父子塌陷（子元素
margin-top导致父容器下移） - 也适用于兄弟塌陷（两个相邻
div的margin-bottom/margin-top只取最大值） - 若父容器已有
display: flex或display: grid，无需额外加flow-root——它们本身已是BFC
兼容性 fallback 怎么写
如果项目需支持IE11或旧版安卓WebView，display: flow-root不可用，此时可用透明边框作为轻量降级：
.parent {
border-top: 1px solid transparent;
}
- 别写
border: 0或border: none——它们不触发BFC - 仅设
border-top比全边框更精准，不影响左右间距 - 若父容器已有border但依然塌陷，请检查computed styles，确认reset.css没把它清成
border: none
真正容易被忽略的是：父子折叠造成的位移是“静默”的——页面上看不到顶部空白，但整个模块位置偏了。这时候查子元素的margin-top毫无意义，得立刻看父容器是否满足BFC条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
