margin塌陷是css规范定义的垂直外边距合并行为，仅发生在标准文档流中块级元素的margin-top/margin-bottom之间；触发场景包括兄弟元素间、父子元素间及空元素自身塌陷；可用display:flow-root、flex/grid+gap或padding-top:0.1px等方案安全干预。
margin塌陷不是 bug，是 CSS 规范明确定义的垂直方向外边距合并行为（collapsing margins），只要满足条件就会发生，躲不掉，只能干预。
哪些情况会触发 margin 塌陷？
只在标准文档流中、块级元素、垂直方向（margin-top / margin-bottom）上生效。三种典型场景：
- 兄弟元素间：
.box1的margin-bottom和.box2的margin-top相遇，取较大值 - 父子元素间：父元素无
border、无padding、未触发 BFC，子元素设margin-top会“顶穿”父容器，整体下移 - 自身塌陷：空
div同时设margin-top和margin-bottom，两者直接合并，视觉上无效
为什么 overflow: hidden 能解决但不推荐滥用？
它通过强制创建 BFC 隔离内部 margin，从而阻止合并。但副作用明显：
-
overflow: hidden可能意外裁剪position: absolute子元素（比如下拉菜单、Tooltip） - 若父容器本应有阴影（
box-shadow）或圆角溢出内容，会被截断 -
overflow: auto在缩放或高 DPI 下可能无故出现滚动条
现代项目该优先用什么方案？
首选语义清晰、副作用少、浏览器支持良好的方式：
- 给父容器加
display: flow-root：最干净的 BFC 触发方式，不改变尺寸、不裁剪内容、不干扰overflow原意（Chrome 89+、Firefox 73+、Safari 15.4+ 支持） - 改用
display: flex或display: grid+gap：彻底绕过 margin 合并逻辑，gap是原生间距接口，不会塌陷，还支持响应式单位如clamp(8px, 2vw, 16px) - 微调 padding：用
padding-top: 0.1px打断塌陷条件链，轻量且全兼容，适合组件库封装场景
真正容易被忽略的是：塌陷往往不是孤立问题——它常和父容器未设高度、子元素浮动未清除、或多个嵌套层级的 margin 同时作用有关。调试时别只盯着一个 margin-top，要顺着盒模型往上查父级是否“透风”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
