这不是 bug，是 css 规范定义的 margin 塌陷；用开发者工具 box model 面板可识别：子元素 margin-top 实线但父容器顶部无空隙，或相邻兄弟仅显示一个 margin 值即为塌陷。
这不是 bug，是 CSS 规范定义的垂直外边距塌陷（margin collapse）行为——子元素的 margin-top 并没有“消失”，而是和父容器的上边界合并了，取较大值后作用在父容器外部，导致整个父容器下移。
怎么快速确认是不是 margin 塌陷？
打开开发者工具（F12），选中父容器，在右侧 Box Model 面板里观察：
- 如果子元素的
margin-top显示为实线数值，但父容器顶部没空隙、整体却下移了 → 是父子塌陷 - 如果两个相邻
div之间只标出一个 margin 值（比如分别设了margin-bottom: 20px和margin-top: 30px，面板只显示30px）→ 是兄弟塌陷 - 数值带虚线？说明这个
margin来自继承、UA 样式或被覆盖，先查样式优先级，不是塌陷
display: flow-root 是最干净的解法
它专为创建无副作用 BFC 而设计，写在父容器上即可打断塌陷：
.parent {
display: flow-root;
}
.child {
margin-top: 20px;
}
优势很实在：
- 不改变尺寸、不裁剪
box-shadow、不影响position: absolute子元素定位 - 不像
overflow: hidden那样可能意外截断下拉菜单或阴影 - 语义清晰：你就是要隔离布局，不是为了隐藏溢出
兼容性注意：Chrome 64+ / Firefox 59+ / Edge 79+ / Safari 15.4+ 支持；若需兼容 IE，得降级用 border-top: 1px solid transparent 或 overflow: hidden。
border-top 和 padding-top 的实际代价
加 border-top: 1px solid transparent 或 padding-top: 1px 确实能打断塌陷，但容易埋坑：
-
border-top在box-sizing: content-box下会让高度 +1px；若父容器有box-shadow，边缘可能发虚 -
padding-top: 1px会撑高父容器，如果父容器写了固定height，必须同步调整，否则内容被截 - JS 动态读取
getBoundingClientRect().height时，多出的 1px 会被计入，后续逻辑可能出错 - 团队协作中，别人看到这个
border很可能以为是设计需求，不敢删改
真正容易被忽略的是：塌陷只发生在普通流中的块级盒之间，且只影响 margin-top 和 margin-bottom。一旦父容器用了 flex、grid、float 或 position: absolute，塌陷就自动失效——但它的子元素之间仍可能塌陷。所以别默认“加了 margin 就一定有效”，先看父容器的 display 类型和是否触发了 BFC。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
