margin塌陷是指相邻块级元素的垂直外边距合并为较大值而非相加，是css规范行为；可通过bfc（如overflow:hidden或display:flow-root）隔离解决，但bfc不适用于行内元素、绝对定位、flex/grid项间距等场景。
什么是margin塌陷？
两个上下相邻的块级元素，各自有margin-top和margin-bottom，但实际间距不是两者相加，而是取较大值——这就是margin塌陷。它只发生在普通文档流中的块级盒之间，不是bug，是CSS规范明确规定的渲染行为。
- 常见于父子元素：父容器没边框、内边距、内容分隔，子元素的
margin-top会“冒”到父容器外，导致父容器整体上移 - 也出现在兄弟元素间：比如连续的
<p></p>或<div>，上下margin不会叠加成两倍，而是一次性“塌”成一个<li>空块级元素（如只有<code>margin没内容的<div>）也会塌陷掉全部垂直margin<h3>怎么用BFC阻止margin塌陷？</h3> <p>BFC（Block Formatting Context）是一个独立的渲染区域，内部的布局不受外部影响，外部也不受内部margin塌陷干扰。触发BFC就能让元素“自闭”，不参与外层的margin合并。</p> <ul> <li>常用触发方式：<code>overflow设为hidden、auto或scroll（注意：visible不行） - 其他可靠方式：
display: flow-root（现代推荐，语义清晰且无副作用）；float: left/right；position: absolute/fixed；contain: layout - 避免用
display: inline-block或table-cell来触发BFC——它们会改变元素的默认显示行为，可能破坏布局预期
示例：解决父子塌陷
.parent {
overflow: hidden; /* 触发BFC，子元素margin不再穿透 */
}
.child {
margin-top: 20px;
}为什么display: flow-root比overflow: hidden更安全？
overflow: hidden虽然简单，但容易误伤：如果父容器本应有滚动内容或下拉菜单，它会把溢出部分裁掉，还可能影响position: fixed子元素的定位参考系。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root专为创建BFC设计，不改变溢出行为，不干扰定位上下文，兼容性也已覆盖Chrome 64+/Firefox 59+/Safari 15.4+ - IE完全不支持
flow-root，但IE本身不支持BFC触发的margin隔离逻辑（它有自己的塌陷规则），所以实际项目中若需兼容IE，得回退到overflow: auto并手动处理溢出 - 不要对flex或grid容器设
flow-root——它们自身已是独立格式化上下文，再设无效
哪些情况BFC也救不了margin塌陷？
BFC只能隔离**块级盒之间的垂直margin合并**，对其他场景无效：
- 行内元素、
display: inline盒子不参与margin塌陷，设BFC也没意义 - 绝对定位元素脱离文档流，它的margin本来就不参与塌陷，加BFC纯属多余
- 使用
gap的flex/grid容器中，项之间用gap控制间距，此时margin不塌陷，但也不是因为BFC——是布局模型不同 - 表格单元格（
<td>）的margin被忽略，这是渲染规则限制，BFC无法绕过<p>真正要警惕的是：看到布局错位就下意识加<code>overflow: hidden，结果发现下拉菜单不见了、滚动条没了、fixed元素定位偏了——这时候得先确认是不是真需要BFC，以及用哪个方式最轻量。
