display: flow-root 是最干净的 margin collapse 修复方式，但 Safari 15.4 前需 fallback；根本原因是旧引擎 BFC 触发机制松散，导致各浏览器对 overflow、空元素等处理不一致。
直接说结论：用 display: flow-root 是当前最干净、最可控的修复方式，但 Safari 15.4 之前不支持，老项目必须 fallback 到 overflow: hidden 或 border。
为什么不同浏览器对 margin collapse 表现不一致
根本原因不是“bug”，而是 BFC 触发机制在旧引擎中行为松散。比如 IE 和 Safari ≤15.3 对 overflow: hidden 的处理会意外截断 popover、tooltip 或 fixed 定位子元素；而 Chrome/Firefox 对 display: flow-root 的解析更严格，能真正隔离 margin 链。
常见差异现象包括：
- 同一段父子结构，在 Chrome 中父容器顶部被顶开 20px，在 Safari 中却“看起来正常”（其实是子元素 margin 没生效，被静默吞掉了）
-
overflow: auto在 Firefox 中能阻止折叠，在 Edge Legacy 中无效 - 空元素的上下 margin 折叠，在 iOS WebView 中可能完全不折叠，导致间距多出一倍
display: flow-root 是首选，但要注意兼容性断点
这是 W3C 明确定义的 BFC 创建方式，语义清晰、副作用最小。它让容器自身成为独立格式化上下文，彻底切断与子元素的 margin 合并链。
实际写法示例：
.card {
display: flow-root; /* 主力方案 */
}
.card > .header {
margin-top: 16px; /* 不再和 .card 的 margin-top 合并 */
}
兼容性要点：
- Chrome 58+、Firefox 55+、Safari 15.4+ 均原生支持
- Safari 15.3 及更早版本需 fallback：
display: flow-root会被忽略，必须加overflow: hidden或border-top: 1px solid transparent - IE 完全不识别
flow-root，必须用zoom: 1（触发 hasLayout）或overflow: hidden
避免用 overflow: hidden 当默认方案
它确实能创建 BFC，但副作用太强，容易在真实场景中翻车：
- 下拉菜单、气泡提示（
position: absolute子元素）会被裁剪 - 横向滚动内容（如表格、长标签栏）无法溢出显示
- 某些动画库（如 Framer Motion）依赖
overflow: visible计算位置，加了hidden后布局错乱
如果必须兼容老 Safari 或 IE，优先选视觉无感的替代方案：
-
padding-top: 0.1px—— 父容器加极小 padding，不改变布局尺寸 -
border-top: 1px solid transparent—— 更稳定，所有浏览器都认 -
min-height: 0+display: flex—— 双重保险，flex 容器天然不参与 margin collapse
父子折叠最容易被忽略的触发条件
不是“有 margin 就折叠”，而是必须同时满足三个条件：
- 父元素是普通流中的块级元素（不能是
display: inline-block或float） - 父元素没有
border-top、没有padding-top、没有内容（哪怕一个空格也不行） - 子元素是第一个常规流子元素，且没设
clear或position: absolute
这意味着：哪怕你只给父元素加了一个 或一行注释 HTML，折叠就消失了——但这不是可靠解法。真正可控的方式，永远是让父元素自己建立 BFC，而不是靠“加个空格”这种不可维护手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
