外边距塌陷不是bug，是css规范定义的垂直margin折叠行为；当父元素无border、padding且未触发bfc时，子元素margin-top会与其上边界合并，导致父容器整体下移，现代推荐用display:flow-root或flex+gap解决。
外边距重叠（塌陷）不是 bug，是 CSS 规范定义的垂直 margin 折叠行为，无法“禁用”，只能打断它发生的条件。
为什么子元素 margin-top 会让父容器整体下移？
这是典型的父子塌陷：当父元素是 display: block、无 border、无 padding、未触发 BFC，且第一个子元素设置了 margin-top 时，该 margin 会和父元素自身的上外边距合并（取较大值），视觉上就像父容器被顶下来了。
这不是渲染错误，而是排版逻辑——段落之间本就不该叠加上下 margin。
- 只发生在普通流中的块级元素之间
- 仅影响垂直方向（
margin-top/margin-bottom），margin-left/margin-right永远不合并 - 父元素必须处于“标准流”且未建立新的块格式化上下文（BFC）
现代推荐方案：display: flow-root
这是专为解决此类问题设计的 display 值，Chrome 64+ / Firefox 59+ / Edge 79+ / Safari 15.4+ 均支持，无副作用。
直接写在父容器上即可：
.parent {
display: flow-root;
}
- 不改变盒子尺寸，不裁剪
box-shadow - 不影响
position: absolute子元素定位 - 比
overflow: hidden更安全——不会意外隐藏溢出内容或滚动条 - IE 完全不支持；若需兼容 IE，降级用
overflow: hidden或透明边框border: 1px solid transparent
替代思路：用 gap 替代 margin 从根本上绕过合并
如果你控制的是布局容器（如卡片列表、表单字段组），改用 display: flex 或 display: grid + gap，天然规避所有 margin 合并。
示例（垂直间距）：
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
-
gap是布局容器原生间距接口，值不会被合并 - 支持响应式单位：
gap: clamp(8px, 2vw, 16px) - 别在 flex/grid 容器自身再设
margin来“补间距”，那又回到老问题
真正容易被忽略的是：塌陷只在“普通流块级元素”间发生。一旦你用了 float、position: absolute、display: inline-block 或任何触发 BFC 的方式，它就自动失效——但这些方案各有代价（比如浮动需清除、绝对定位脱离文档流）。display: flow-root 和 gap 是目前语义清晰、副作用最小的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
