外边距塌陷是CSS规范规定的布局行为，指垂直方向相邻块级元素的margin相遇时取较大值而非相加；最常见于无border/padding/content的父容器与子元素间，导致父容器“失高”或内容上移。
什么是外边距塌陷，为什么它总在父子元素间发生
外边距塌陷不是bug，是CSS规范明确规定的布局行为：当两个垂直方向的margin相遇（比如父元素margin-bottom和子元素margin-top），浏览器会取其中较大者，而不是相加。最常踩坑的是父容器看起来“没高度”、内容往上跑一截——其实是因为子元素的margin-top直接穿透到父级外部了。
常见错误现象：
— 父<div>设置了<code>background-color，但顶部留白不显示背景
— 子<p></p>设了margin-top: 20px，结果整个父容器被往下推了20px
— 用border: 1px solid临时调试时，突然发现塌陷消失了（因为border阻止了margin接触）
- 只发生在**块级元素**的垂直
margin之间，flex或grid容器内部默认不塌陷 - 空的块级父元素（无border/padding/content）与子元素之间最容易塌陷
-
display: inline-block或float元素不会触发父级塌陷，但会带来其他布局副作用
用BFC快速终结塌陷：哪些值真正可靠
BFC（块级格式化上下文）是解决塌陷最干净的方式——它让元素内部形成独立渲染区域，margin不再和外部交换。但不是所有能触发BFC的属性都适合日常使用。
-
overflow: hidden最常用，但注意：如果子元素有position: absolute且超出父容器，会被裁剪 -
display: flow-root是现代首选，专为BFC设计，无副作用，Chrome 64+/Firefox 58+支持 -
float: left或position: absolute虽能触发BFC，但会让元素脱离文档流，通常不是你想要的 -
display: table-cell或display: inline-block可行，但会改变盒模型行为，影响对齐和宽度计算
推荐写法：
.container {
display: flow-root;
}比overflow: hidden更语义清晰，也不用担心溢出内容被截断。
Padding替代方案：什么时候该用，什么时候不该用
给父元素加padding-top或padding-bottom确实能“撑开”塌陷，但它本质是绕过问题，而非解决。关键看场景是否允许。
立即学习“前端免费学习笔记（深入）”；
- 适合：需要固定间距的卡片、表单区块，且父容器本就该有内边距（比如
padding: 16px） - 不适合：响应式布局中padding随屏幕变化，而margin需保持一致；或父容器需要精确高度控制（如动画、JS测量）
- 注意：
padding会增加元素总尺寸，可能触发意外换行或滚动条，box-sizing: border-box必须同步设置
示例：
.card {
padding: 20px;
box-sizing: border-box;
}此时子元素margin-top不再塌陷，但这是靠padding“占位”，不是隔离margin逻辑。
Flex/Grid布局下还用管塌陷吗
绝大多数情况下不用。Flex容器（display: flex）和Grid容器（display: grid）内部，子元素的margin不会与父级塌陷——它们天然隔离了外边距传播路径。
- 但注意：如果父容器本身是块级元素，它的
margin仍会和上一个兄弟元素塌陷（这是另一层塌陷） - Flex项目即使设
margin-top，也不会影响父容器高度计算，但align-items: flex-start可能让视觉上像塌陷 - Grid中
gap是更可控的间隔方式，应优先于margin做项目间距
所以如果你正重构老代码，把display: block换成display: flex，往往比加BFC更彻底——只是别忘了检查IE兼容性（flex需-ms-前缀或降级方案）。
真正容易被忽略的是：塌陷可能跨多层嵌套出现，比如祖父容器 + 父容器 + 子容器三者margin全为0，但最深层子元素一个margin-top: 30px就能让整个结构上移。这时候单查某一层没用，得顺着DOM一层层看computed margin和box model。
