display: flow-root 是最安全解法，专为隔离 margin 塌陷设计，不裁剪内容、不干扰 overflow、不改变盒尺寸，现代浏览器支持稳固；IE 不支持时可降级为 overflow: hidden 或 padding-top: 0.1px。
直接给父元素加 display: flow-root 是最安全、副作用最小的解法。 它专为这类场景设计，不裁剪内容、不干扰 overflow、不改变盒尺寸，现代浏览器支持已非常稳固（Chrome 89+、Firefox 73+、Safari 15.4+）。
为什么 overflow: hidden 能用但容易出问题
它通过触发 BFC 隔离父子 margin，原理正确，但副作用真实存在：
-
overflow: hidden会裁剪所有超出父容器的内容，包括position: absolute的下拉菜单、Tooltip、阴影（box-shadow）、动画位移元素 -
overflow: auto在高 DPI 屏幕或页面缩放时，可能无故出现滚动条 - 若父容器本就不该限制溢出（比如卡片带投影、模态框有过渡动画），加这个属性等于“为修 bug 引入新约束”
display: flow-root 的实操要点
这是目前语义最清晰、行为最可预测的方案：
- 只需在父元素上加一行：
.parent { display: flow-root; } - 它创建 BFC，但不改变元素的块级流行为，也不影响
overflow原意 - 兼容性需留意：IE 完全不支持；如项目仍需支持 IE，可降级为
overflow: hidden或加border: 0.1px solid transparent - 注意不要和
float或position: absolute混用——这些本身会脱离普通流，flow-root在这种上下文中无效
替代方案：用 gap 或微调 padding
当控制权在你手上（比如封装组件、写列表布局），可以绕开 margin 合并逻辑本身：
立即学习“前端免费学习笔记（深入）”；
- 把父容器改成
display: flex; flex-direction: column;，再用gap: 20px控制子项间距——gap不塌陷，且支持clamp(8px, 2vw, 16px) - 对老项目或轻量修复，
padding-top: 0.1px是极小侵入的解法：它打断了“父内容区顶边与子 margin-top 直接接触”的条件链，全浏览器兼容，且视觉上完全不可见 - 避免用
border: 1px solid transparent——虽然有效，但会增加 2px 总高度，影响精确布局（尤其在 flex/grid 中）
真正容易被忽略的是：父子 margin 塌陷很少单独发生。它常和父容器 height: auto 下的高度塌陷、子元素浮动未清除、或嵌套多层未设隔离共同作用。调试时别只盯着那个 margin-top，要顺着盒模型往上查——父元素有没有 border？padding？是否已处于某个 BFC 内？
