Margin塌陷是CSS规范定义的垂直外边距合并行为，发生在块级流中父子元素间无border/padding/内容隔离时，子元素margin-top会与父元素上边界合并，使父元素外边缘上移；解决可用padding:0.1px或display:flow-root触发BFC。
子元素设 margin-top 却让父元素“上移”或“被顶开”，不是 bug，是 CSS 规范明确规定的 margin 塌陷（margin collapse）行为。它只发生在块级流中、垂直方向、且父子间无隔离层时。
为什么 margin-top 会“穿透”到父元素
浏览器把父元素的“顶部边界”和子元素的 margin-top 当作相邻块级盒的垂直外边距，直接合并成一个——如果父元素没 border、没 padding、没内容、overflow: visible（默认），那这个合并后的 margin 就会体现在父元素的外边缘上。你看到的“父元素被撑开”，其实是它的 margin 被重置了，而不是高度变高了。
常见错误现象：
- 父元素加了背景色，却发现子元素紧贴顶部，没留出预期的 20px 空白
- 开发者工具里看父元素
computed margin-top是 0，但子元素明明写了margin-top: 20px - 父元素高度为 auto，却比子元素还矮——说明它根本没“包含”那段 margin
用 padding-top 打补丁要小心尺寸漂移
给父元素加 padding-top: 1px 确实能立刻打断塌陷，因为 padding 在盒模型里是“隔离层”。但它不是零成本操作：
-
padding-top: 1px会让父元素总高度 +1px，哪怕你用了box-sizing: border-box，也可能影响后续基于 height 计算的逻辑（比如 JS 获取offsetHeight） - 如果父元素已有
padding或border，再叠加上去可能破坏原有间距节奏 - 语义错位：你本意是控制子元素位置，结果改了父容器的内边距，后期维护容易误解
更稳妥的写法是 padding-top: 0.1px——足够触发隔离，又几乎不影响布局精度，尤其适合需要像素级对齐的场景。
用 BFC 彻底隔离，选 display: flow-root 而非 overflow: hidden
display: flow-root 是专为创建无副作用 BFC 设计的值，它让父元素成为独立渲染区域，子元素的 margin 再也不会和外部合并。相比 overflow: hidden，它没有隐藏溢出、不干扰滚动、不引发 Safari 下 transform 缩放闪动等问题。
兼容性注意点：
- Chrome 65+、Firefox 58+、Safari 15.4+、Edge 79+ 均支持；IE 完全不支持
- 需兼容老 Safari（@supports (display: flow-root) {} 包裹，并 fallback 到
overflow: hidden - 别在已有滚动逻辑的容器（如聊天列表、日志面板）上直接套
overflow: hidden，否则内容真会被裁掉
示例：
.parent {
display: flow-root;
}
.child {
margin-top: 20px;
}
别误用 flex/grid 只为破塌陷
display: flex 或 display: grid 确实会自动触发 BFC，也能阻止塌陷，但它们会彻底改变子元素的布局行为：
- flex 容器下，子元素默认
align-items: stretch，块级子元素高度会被拉满，可能覆盖原有样式 - grid 容器若没定义
grid-template-rows，子元素会按行排列，破坏文档流顺序 - 两者都会让子元素脱离普通块流，影响
float、clear等传统布局逻辑
除非你本来就要用 flex/grid 布局，否则只为防塌陷而强切 display 类型，属于用大锤砸芝麻——方案越贴近原始需求，越少埋雷。
真正容易被忽略的是：塌陷只在块级流中发生。一旦子元素 position: absolute、float: left 或 display: inline-block，问题就自动消失——但这不是解决，是绕开。理解触发条件，比记住七八种 hack 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
