display: flow-root是首选解法，因它专为阻断外边距合并而设计，不改变盒类型、不裁剪溢出、不脱离文档流，且必须作用于可能发生合并的父容器上。
直接用 display: flow-root，它是目前最干净、副作用最小的创建 BFC 方式，专为解决 margin collapse 而生。
为什么 display: flow-root 是首选
它不改变盒类型（比如不会把 inline 元素变块）、不裁剪溢出内容（overflow: hidden 会）、也不让父容器脱离文档流（float 或 position: absolute 会）。它只做一件事：创建一个无污染的 BFC，把内部 margin “关起来”，不让父子、兄弟之间的垂直外边距跨出边界合并。
常见误用是给子元素设 display: flow-root——没用。必须作用于**可能发生合并的父容器**上，比如包裹多个 <p> 的 <div class="content">。
overflow: hidden 能用，但得小心这些坑
它确实能快速创建 BFC，但副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 会裁剪
box-shadow、transform溢出部分、定位子元素的z-index层级可能被截断 - 当父容器内有下拉菜单、tooltip、或绝对定位弹层时，容易被意外隐藏
- 在响应式场景中，如果后续加了
max-height或动画，overflow: hidden可能掩盖滚动行为
所以除非老项目兼容性要求高（IE 不支持 flow-root），否则不建议把它当默认解法。
Flex/Grid 布局也能阻断，但逻辑不同
设置 display: flex 或 display: grid 后，子项默认不参与外边距合并——这不是因为它们创建了 BFC，而是因为子项变成了 flex item 或 grid item，已不属于“普通流中的块级盒”，自然绕开 margin collapse 触发条件。
注意点：
- 父容器变成 flex 容器后，
width: 100%行为可能变化，子项默认不换行 - 如果只为了防合并而强行套一层
display: flex，又得重置flex-direction、align-items等，反而增加维护成本 - 兄弟元素间距建议改用
gap，比依赖 margin 更可控
别忽略触发前提：哪些情况根本不会合并
不是所有 margin 都会合并。确认是否真遇到了 margin collapse，先排除这些：
- 元素用了
float、position: absolute/fixed—— 不参与合并 - 父容器设置了
gap（Flex/Grid）—— 子项 margin 被忽略，由gap控制间距 - 子元素是
inline、table-cell、flex类型 —— 不属于块级盒，不触发 - 父子之间存在 border/padding/非空内容（哪怕一个空格）—— 合并被物理隔断
真正需要 BFC 的典型场景就两个：父容器塌陷（子元素 margin-top 冒出来）、连续块级子元素间距小于预期。其他时候，先检查是不是误判了问题根源。
