margin塌陷是指父子元素的垂直margin合并为单个margin的现象；可通过创建bfc（如overflow:hidden）、添加padding/border、使用display:flow-root等方法阻止。
什么是 margin 塌陷？
当父子元素都设置了 margin-top，且父元素没有 border、padding 或触发 BFC 的条件时，子元素的上外边距会“穿透”父元素，直接与父元素的上边界对齐——看起来像父元素的 margin 没生效，实际是两个 margin 合并成了一个更大的值。这种现象叫 margin 塌陷（margin collapse）。
怎么快速阻止父元素和子元素的 margin 塌陷？
核心思路是让父元素形成独立的块级格式化上下文（BFC），或打断 margin 的合并条件。常用且稳妥的做法有：
- 给父元素加
overflow: hidden（或auto、scroll）——最轻量、兼容性好（IE8+） - 给父元素加
padding-top: 1px（哪怕 1px）——简单直接，但可能影响布局尺寸 - 给父元素加
border-top: 1px solid transparent——视觉无感，又打破塌陷条件 - 用
display: flow-root（现代写法）——语义清晰，专为创建 BFC 设计，Chrome 64+/Firefox 62+ 支持
不推荐仅靠 margin-top: 0 或重置子元素 margin 来“绕开”，因为这没解决根本机制，容易在后续修改中再次暴露问题。
为什么 flex 或 grid 容器里不塌陷？
因为 display: flex 和 display: grid 会让容器自动成为 BFC，子项的 margin 不再与父容器发生合并。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 子项如果是
flex容器内部的块级元素（比如div），它和它的子元素之间仍可能塌陷 -
gap属性不能替代margin解决塌陷，它是布局间隙，不参与 margin 合并逻辑 - 使用
align-items: flex-start不影响塌陷行为，塌陷只发生在文档流中的块级盒模型内
实际调试时怎么看是不是塌陷？
在浏览器开发者工具中检查父元素的 computed 样式，重点看 margin-top 值是否异常小（比如设了 20px 却显示 0），再对比子元素的 margin-top；如果两者之和等于最终看到的空白高度，基本就是塌陷了。
更可靠的方式是临时给父元素加个背景色或边框：
div.parent {
background: #f0f0f0;
border: 1px dashed #999;
}
一旦看到子元素的上边缘“贴着”父元素顶部（而非隔着设定的 margin），就确认塌陷发生了。
真正麻烦的不是不知道怎么修，而是忘了它只发生在块级流中——浮动、绝对定位、inline 元素、table-cell 都不塌陷。所以改布局方式时，别默认以为“加了 margin 就一定有效”。
