外边距重叠是CSS中垂直方向块级元素间margin合并的真实行为，非bug；相邻或嵌套的margin-top与margin-bottom不累加而取最大值，父子间易产生视觉错觉。
什么是外边距重叠？它不是bug，但会“吃掉”你想要的间距
外边距重叠（margin collapse）是 CSS 垂直方向上块级元素间的真实行为：相邻或嵌套的 margin-top 和 margin-bottom 不会累加，而是按规则合并成一个值。比如 margin-bottom: 20px 紧挨着 margin-top: 30px，实际间距只有 30px；子元素设了 margin-top: 40px，父容器却“被顶下去”，顶部空白看似在父元素上，其实完全来自子元素——这是父子重叠最典型的视觉错觉。
display: flow-root 是现代 BFC 触发方式中最干净的选择
给父容器加 display: flow-root，就能让它形成独立的块级格式化上下文（BFC），从而彻底隔离内部 margin 与外部的交互。它不改变文档流、不裁剪溢出内容、不干扰子元素定位，副作用几乎为零。
- 兼容性已覆盖 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+，2026 年绝大多数项目可放心使用
- 比
overflow: hidden更安全：后者可能意外截断下拉菜单、阴影、气泡提示等溢出内容 - 比
float或position: absolute更合理：它们会让元素脱离文档流，引发新的布局连锁问题 - 写法极简：
.container { display: flow-root; }，无需额外 DOM 或伪元素
padding 替代 margin 是语义更准、容错更强的思路
当目标是“让内容离容器边缘保持一段距离”，用 padding 比用 margin 更贴近本意——因为 padding 天然不参与重叠，且属于盒模型内层，受 box-sizing: border-box 控制，尺寸更可控。
- 父子场景中，把子元素的
margin-top: 24px挪到父元素的padding-top: 24px，既破除重叠，又明确表达“容器顶部留空” - 兄弟场景中，统一只设
margin-bottom，再用:last-child { margin-bottom: 0; }清除末尾冗余，避免上下 margin 同时存在 - 注意：若父容器已有
border或padding，重叠本就不会发生，此时加padding是锦上添花而非补救
哪些“解决方案”看起来有效，实则埋了雷
有些老办法能阻断重叠，但代价是引入新问题，日常开发中应主动规避：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden虽能触发 BFC，但一旦子元素有position: absolute溢出、或带transform的动画、或下拉菜单，就可能被裁剪 -
float: left或display: inline-block会让父容器失去块级特性，影响后续兄弟元素的垂直对齐和宽度计算 - 用伪元素
::before { content: ""; display: table; }可行，但增加了渲染节点和样式复杂度，不如直接上flow-root - 给父元素加
border-top: 1px solid transparent虽小而有效，但 border 属于视觉层，语义上并不表示“此处需分隔”，维护时容易被误删
真正需要警惕的，不是 margin 本身，而是默认文档流中那些“看不见的连接”。只要意识到重叠只发生在标准流块级元素的垂直方向，且必须满足无隔离、相邻/嵌套、无 BFC 这三个条件，你就已经控制了一半局面。剩下的，交给 flow-root 或 padding，比硬调 margin 值靠谱得多。
