子元素的margin-top“失效”实为外边距合并：父元素无border/padding/bfc时，其内容顶边与子元素margin-top合并取较大值，导致父容器整体下移；推荐用display:flow-root触发bfc阻断，或改用padding、flex等方案。
它不是失效，而是被合并了——浏览器按规范把两个垂直 margin 合成一个，取较大值，所以看起来“少了一截”。
margin-top 看似不生效，其实是穿透到父容器外了
当你给子元素设 margin-top: 40px，而父容器既没 padding、也没 border、更没触发 BFC，那么这个 margin-top 就不会推着子元素往下走，而是直接“顶开”父容器的上边界。结果是：父容器整体下移 40px，子元素在父容器内部的位置反而没变。
- 这不是 bug，是 W3C 规范明确定义的行为（margin collapsing）
- 常见于
<p></p>、<div> 等块级元素在 normal flow 中的默认排版 <li>动态插入内容时尤其容易暴露——比如 JS 插入一个新 <code><div class="item">，它和前一个的 <code>margin-bottom突然合并，间距变小兄弟元素间 margin 合并让间距“缩水”
两个相邻块级元素，一个设
margin-bottom: 20px，另一个设margin-top: 30px，它们之间的实际间距不是 50px，而是max(20px, 30px) = 30px。- 正负值会代数相加：比如
margin-bottom: 15px+margin-top: -10px→ 实际间距 5px - 全负值取绝对值最大者：比如
-12px和-8px→ 合并为-12px - Flexbox / Grid 容器的直接子元素不会发生这种合并，这是最干净的规避方式之一
display: flow-root 是目前最稳妥的修复手段
比起加
overflow: hidden或border: 1px solid transparent，display: flow-root是专为此设计的现代方案：它创建 BFC，阻断 margin 合并，且不改变盒模型尺寸、不裁剪溢出内容、无副作用。- 兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+，IE 不支持（但 IE 已退出主流）
- 写法极简：
.container { display: flow-root; } - 注意：它只作用于该容器自身，如果重叠发生在多层嵌套中（比如孙元素 → 父 → 祖父），需在每一层可能传递 margin 的父级都检查是否需要加 BFC
真正容易被忽略的是：重叠不是“错误”，而是 CSS 布局引擎对空白区域的主动优化；你越想用 margin 控制间距，越要清楚它在哪一层被合并、被谁合并、又是否真的需要被合并。
- 正负值会代数相加：比如
