会重叠，这是css规范定义的margin collapse行为：仅发生在普通流中垂直相邻的块级元素间，包括兄弟、父子穿透及空元素自身三种场景；全正取最大，正负混合相加，全负取绝对值最大者。
因为这是 CSS 规范明确定义的行为，不是 bug，而是为普通流中块级元素的排版做“语义化间距优化”——浏览器会主动合并相邻或嵌套的垂直 margin-top 和 margin-bottom，只保留最大值。
哪些情况一定会触发 margin 垂直重叠
必须同时满足三个条件：块级元素、处于标准文档流（Normal Flow）、垂直方向紧邻且中间无隔离层。
-
display: block、list-item、table等块级显示类型才参与重叠；inline-block、flex、grid、float、absolute子元素完全不重叠 - 父元素没设置
border、padding、overflow: hidden/scroll/auto或非空内容时，其margin-top会和第一个子元素的margin-top重叠（同理margin-bottom与末子元素） - 两个兄弟
<div> 元素上下紧挨，<code>margin-bottom和margin-top直接相遇，就会折叠负 margin 也参与重叠，但计算逻辑不同
很多人以为负 margin 就“取消重叠”，其实它仍参与折叠，只是最终值按规则重新算：
- 全为正值 → 取最大值（如
margin-bottom: 20px+margin-top: 30px→ 实际间距30px） - 有正有负 → 正值之和减去绝对值最大的负值（如
margin-bottom: 40px+margin-top: -15px→40 - 15 = 25px） - 全为负值 → 取绝对值最大者，再取负（如
-10px和-25px→-25px）
为什么 overflow: auto 能阻止父子重叠
因为
overflow非visible时，浏览器会为该元素创建新的 BFC（块级格式化上下文），而 BFC 内部的 margin 不会和外部（包括父元素）发生重叠。- 这个方法副作用小，但要注意：如果容器本身需要滚动，
overflow: auto可能意外触发滚动条 -
overflow: hidden更常用，但它会裁剪溢出内容，要确认是否影响布局 -
overflow: clip是现代替代方案（Chrome 97+），不触发滚动、不裁剪、同样创建 BFC，但兼容性需检查
真正容易被忽略的是：重叠发生在渲染计算阶段，而非 DOM 构建时。哪怕你用 JavaScript 动态插入元素，只要它们满足重叠条件，样式引擎就会在 layout 阶段合并 margin —— 所以不能靠“晚一点加 class”绕过，得从结构或格式化上下文层面切断条件。
- 全为正值 → 取最大值（如
