外边距重叠不是bug，是CSS规范明确要求的垂直相邻块级元素在同BFC内无分隔时的margin折叠行为；解决关键是打断条件链，首选父容器设display:flow-root触发BFC，或用padding-top:0.1px等轻量隔离方案。
外边距重叠不是 bug，是 CSS 规范明确要求的行为——只要两个块级元素垂直相邻、处于同一 BFC、中间没 border/padding/内容隔开，margin-top 和 margin-bottom 就会折叠。想“修复”，本质是打断这个条件链，而不是压制 margin 值本身。
父子 margin 塌陷：子元素的 margin-top 为什么“顶开”父容器
典型现象：父容器没 border、没 padding、没内容，子元素设了 margin-top: 24px，结果整个父容器往下移，顶部空白消失。根本原因是子元素的 margin-top 直接和父容器的 margin 合并，向上“穿透”了。
真正有效的解法必须加在父容器上，且要打破合并条件：
-
display: flow-root是首选：不裁剪内容、不改尺寸、语义清晰，Chrome 58+ / Firefox 55+ / Safari 15.4+ 全支持 -
padding-top: 0.1px比border-top: 1px solid transparent更轻量，视觉无感，但同样能阻断 collapse - 别只改子元素：给子元素套个
div再设flow-root，没用——BFC 必须由“参与合并”的那个父元素自身触发
兄弟元素 margin 合并：两个 div 间距为啥不是 margin 之和
两个垂直排列的 div，一个设 margin-bottom: 20px，一个设 margin-top: 30px，实际间距只有 30px，不是 50px。这不是计算错误，是规范行为：取较大值（正数时），或代数相加（含负数时）。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
-
overflow: hidden加在每个兄弟元素上，不能阻止它们之间的合并——它们仍在同一父 BFC 内 - 给两个兄弟都加
display: flow-root，依然无效——BFC 隔离的是“容器与其后代”，不是“同级兄弟”
正确做法：
- 只把其中一个包进
display: flow-root容器（比如<div class="bfc"></div>），让它脱离原 BFC - 更轻量方案：统一只设
margin-bottom，再用:last-child { margin-bottom: 0; }清末尾，适合列表、段落等线性结构
display: flow-root 为什么比 overflow: hidden 更推荐
两者都能触发 BFC，但副作用天差地别：
-
overflow: hidden会裁剪所有溢出内容：box-shadow、tooltip、下拉菜单、position: absolute子元素全被截断，调试时容易卡在“为什么弹层不见了” -
overflow: auto虽也触发 BFC，但可能意外出现滚动条（哪怕内容没溢出），行为不稳定 -
display: flow-root专为创建 BFC 设计，不改变盒模型、不裁剪、不加滚动、不影响定位，连flex父容器里的子项也能安全使用
兼容性注意：Safari 15.4 前不支持，老项目需 fallback 到 overflow: hidden 或 padding-top: 1px。
Flex/Grid 布局中要不要管 margin collapse
完全绕过问题，但前提是用对了方式：
- Flex 布局中子项默认不参与 margin 折叠，但若你已用
display: flex却还看到重叠，大概率是父容器没设flex-direction: column，或子项被设了display: block覆盖了默认行为 - Grid 布局完全绕过 margin 折叠，但
gap是更推荐的间距控制方式——它不依赖元素自身margin，逻辑更干净 - 别在 flex 容器里强行加
display: flow-root来“防重叠”，这属于冗余操作，还可能干扰主轴对齐
真正容易被忽略的是：重叠只发生在「同一 BFC 内」。BFC 是局部屏障，不是全局开关——你用 flow-root 隔离了一组父子，它们和外部其他元素之间仍可能重叠。
