display: flow-root 是阻断父子 margin 重叠的首选方案，它创建 BFC、无副作用、不裁剪溢出；兼容旧浏览器可用 padding: 1px 或 overflow: hidden（但会裁剪），需注意层级传导与布局影响。
直接给父容器加 display: flow-root，能干净、无副作用地阻断父子间 margin 重叠；若需兼容老浏览器（如 IE），改用 overflow: hidden 或 padding: 1px，但要注意裁剪和盒模型影响。
为什么子元素的 margin-top 会“顶穿”父容器
这不是 bug，而是 CSS 规范定义的 margin collapse 行为：当父元素处于 normal flow、没有 border/padding、且未创建 BFC 时，第一个子元素的 margin-top 会与父元素的上边界合并，实际效果是整个父容器被往下推，而非子元素在内部下移。同理，margin-bottom 也可能“塌陷”进父容器底部。
常见触发场景包括：<p> 套在 <div> 里、动态插入的卡片列表、表单字段组等——只要父子间“空无一物”，就容易中招。
- 兄弟元素间也会重叠，比如连续两个
<p>，margin-bottom: 20px和margin-top: 30px最终只留 30px 间距 - 空
<div>的上下 margin 会自合并，导致它“消失”成一条线 - 重叠可跨层级传递：孙元素的
margin-top可能一路传到曾祖容器，单加一层padding不一定够
首选方案：display: flow-root 创建 BFC
这是专为解决此类问题设计的现代属性，语义清晰、不改变盒尺寸、无视觉副作用，且不会意外裁剪 position: absolute 子元素或阴影。
立即学习“前端免费学习笔记（深入）”；
写法极简：
.card-list {
display: flow-root;
}
.card-list > .card {
margin: 16px 0;
}兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+；若项目需支持 IE，则不能单独依赖此方案。
- 别用
overflow: hidden替代——它虽兼容 IE8+，但会裁剪溢出内容（比如 tooltip、下拉菜单、box-shadow） - 避免
float或position: absolute——它们虽能触发 BFC，但会让子元素脱离文档流，引发新布局问题 -
display: inline-block会引入行内空白间隙，需额外处理font-size: 0或注释 hack
兼容性兜底与易踩坑点
当必须支持旧浏览器，或 flow-root 不可用时，以下方法可临时替代，但各有代价：
-
padding: 1px比透明边框更安全：不会因border-style变化失效，也不增加渲染负担；padding-top: 0.01px虽然也生效，但语义模糊，调试困难 -
border: 1px solid transparent确保宽度 > 0 且 style 不为none或0；否则无效。注意 Tailwind 等工具链可能 purge 掉border-transparent类 - 用 Flex 布局替代：设父容器
display: flex; flex-direction: column;后，子项垂直margin自动失效，改用gap控制间距更可控——但仅适用于布局意图本就是垂直排列的场景 - 全局重置
* { margin: 0; padding: 0; }能减少意外，但别忘了显式加回必要间距，否则段落、标题全挤在一起
真正容易被忽略的是：margin collapse 是逐层传导的。一个 margin-top: 40px 的孙子元素，可能让四层外的容器整体下移——此时只在最外层加 flow-root 不够，得检查中间每一层是否都隔离了重叠。
