display: flow-root是现代首选解法，它专为阻断外边距合并设计，创建无副作用BFC，不裁剪box-shadow或absolute子元素，兼容Chrome 64+/Firefox 58+/Safari 15.4+/Edge 79+，须作用于参与合并的父容器自身。
margin 合并不是 bug，是 CSS 规范定义的行为；想“彻底解决”，关键不是消灭它，而是控制它发生的上下文——绝大多数时候，你只需要在特定父容器上加一个 display: flow-root 就能干净阻断父子和兄弟间的合并，且无副作用。
为什么display: flow-root是现代首选解法
它专为这类问题设计：创建 BFC（块格式化上下文），但不像 overflow: hidden 那样可能裁剪 box-shadow、position: absolute 子元素或弹层，也不像 float 或 position: absolute 那样让元素脱离文档流。
- 必须加在**参与合并的父容器自身**上，比如包裹卡片列表的
.card-list，而不是子元素 - 兼容性已足够：Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，2026 年绝大多数项目可直接用
- 示例：
.card-list { display: flow-root; } .card { margin-top: 24px; }
兄弟元素间 margin 合并怎么不靠 hack 控制间距
两个连续 <div> 的 margin-bottom 和 margin-top 合并后只取大值，这不是错误，但有时你需要“叠加”效果。最可控的方式是放弃双侧 margin，改用单侧 + 清除末尾：
- 统一只设
margin-bottom，再用:last-child { margin-bottom: 0; }清掉最后一个 - 或者给父容器设
display: flex或display: grid，子项默认不合并（注意：仅对直接子项生效） - 避免用
border-bottom: 1px solid transparent这类物理隔断——它有效，但语义不清，且可能干扰box-sizing计算
老项目兼容 fallback 怎么选才不埋雷
如果要支持 IE 或旧版 Safari（flow-root 不可用），优先选 padding-top: 0.1px 而不是 overflow: hidden：
立即学习“前端免费学习笔记（深入）”；
-
padding-top: 0.1px视觉不可见，不裁剪内容，不影响定位，且能 100% 打断父子合并条件链 -
overflow: hidden虽然兼容性好（IE8+），但一旦父容器里有下拉菜单、Tooltip、动画位移元素，就可能被意外裁剪 - 别用
float或position: absolute做 hack——它们会破坏文档流，后续布局极易连锁错乱
真正难调的是动态插入子项、嵌套层级深的组件（比如评论区折叠面板），这时硬加 flow-root 可能只治标；更底层的解法是统一用 gap（Flex/Grid）替代 margin 控制间距，从源头绕过合并逻辑。
