外边距重叠不是bug，是CSS规范明确规定的垂直相邻块级元素margin折叠行为，取较大值（同号）或代数相加（异号）；解决关键是打断合并条件，首选display: flow-root触发BFC，或用padding/border隔离。
外边距重叠不是 bug，是 CSS 规范明确要求的行为——只要两个块级元素在同一个 BFC 内、垂直相邻、中间没 border/padding/内容隔开，margin-top 和 margin-bottom 就会折叠。想“修复”，本质是打断这个条件链，而不是强行压制 margin。
父子 margin 塌陷：子元素的 margin-top 为什么“顶开”父容器
这是最常被当成 bug 的场景：父容器没 border、没 padding、没内容，第一个子元素设了 margin-top: 24px，结果整个父容器往下移，顶部空白消失。
- 根本原因：子元素的
margin-top直接和父容器的 margin 合并，向上“穿透”了 - 真正有效的解法必须加在父容器上，且要打破合并条件——比如触发新 BFC 或插入隔离层
-
display: flow-root是首选：不裁剪内容、不改尺寸、语义清晰，Chrome 58+ / Firefox 55+ / Safari 15.4+ 全支持 - 兼容老浏览器时，
padding-top: 0.1px比border-top: 1px solid transparent更轻量，视觉无感，但同样能阻断 collapse - 别只改子元素：给子元素加
margin-top: 24px再套个div设flow-root，没用——BFC 必须由“参与合并”的那个父元素自身触发
兄弟元素 margin 合并：两个 div 间距为啥不是 margin 之和
两个垂直排列的 div，一个设 margin-bottom: 20px，一个设 margin-top: 30px，实际间距只有 30px，不是 50px。
- 这不是计算错误，是规范行为：取较大值（正数时），或代数相加（含负数时）
-
overflow: hidden加在每个兄弟元素上，不能阻止它们之间的合并——它们仍在同一父 BFC 内 - 正确做法：只把其中一个包进
display: flow-root容器（比如<div class="bfc"></div>），让它脱离原 BFC - 更轻量方案：统一只设
margin-bottom，再用:last-child { margin-bottom: 0; }清末尾，适合列表、段落等线性结构 - 若用 Flex/Grid 布局，直接绕过问题：
gap不参与 collapse，且语义更明确
display: flow-root vs overflow: hidden：为什么前者才是现代推荐
两者都能触发 BFC，但副作用天差地别。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden会裁剪所有溢出内容：box-shadow、tooltip、下拉菜单、position: absolute子元素全被截断，调试时容易卡在“为什么弹层不见了” -
overflow: auto虽也触发 BFC，但可能意外出现滚动条（哪怕内容没溢出），行为不稳定 -
display: flow-root专为创建 BFC 设计，不改变盒模型、不裁剪、不加滚动、不影响定位，连flex父容器里的子项也能单独用它隔离子树 - 注意：
overflow: visible无效（默认值，不触发 BFC）；overflow-x: hidden; overflow-y: visible行为不统一，别依赖 - 如果父容器已是
position: fixed或absolute，overflow可能不触发 BFC——脱离文档流后逻辑变复杂，此时flow-root依然可靠
什么时候该放弃 BFC，直接用 padding
当目标只是“让内容离边缘保持一段距离”，padding 天然不参与 collapse，比反复调 margin 更直白可控。
- 父子场景：把子元素的
margin-top: 24px挪到父容器的padding-top: 24px，一劳永逸 - 兄弟场景：统一只设
margin-bottom，配合:last-child清除，避免手动算“谁该留谁该去” - 极小代价隔离：父容器加
padding-top: 0.1px，几乎无视觉影响，且完全规避 BFC 带来的任何潜在渲染风险 - 别忘了
box-sizing: border-box：全局加* { box-sizing: border-box; }，避免padding导致宽度溢出 - 表单控件（
input、button）、行内元素（span、a）本就不参与块级 margin 重叠，硬加flow-root可能破坏原有布局节奏
真正容易被忽略的，是“谁该触发 BFC”和“是否真需要 BFC”。很多问题用一行 padding-top 就能稳住，却花时间折腾 flow-root 或 overflow；而有些动态插入的 DOM，加了 BFC 反而打断原有流式对齐逻辑。先看场景，再选工具。
