外边距重叠不是bug，是css规范明确要求的垂直相邻块级元素在同bfc内、无border/padding/内容隔离时的margin折叠行为；解决关键是打断该条件链，首选display:flow-root触发bfc，或用padding-top:1px等隔离方案。
外边距重叠不是 bug，是 CSS 规范明确要求的行为；只要两个块级元素在同一个 BFC 内、垂直相邻、中间没 border/padding/内容隔开，margin-top 和 margin-bottom 就会折叠——想“解决”，本质是打断这个条件链，而不是压制 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: 1px比0.1px更稳妥：语义明确、调试友好、兼容性无死角，且不会干扰box-sizing - 避免用
overflow: hidden：一旦子元素有position: absolute提示框、下拉菜单或box-shadow，就会被意外截断
兄弟元素间距为啥不是 margin 之和
两个垂直排列的 div，一个设 margin-bottom: 20px，一个设 margin-top: 30px，实际间距只有 30px，不是 50px。这不是计算错误，是规范行为：取较大值（正数时）或代数相加（含负数时）。
- 只给其中一个兄弟元素包一层
display: flow-root容器，就能让它脱离原 BFC，阻断合并 - 更轻量的做法是统一约定：只设
margin-bottom，再用:last-child { margin-bottom: 0; }清末尾，适合列表、段落等线性结构 -
overflow: hidden加在每个兄弟上没用——它们仍在同一父 BFC 内，合并照旧发生
display: flow-root 为什么比 overflow: hidden 更安全
两者都能触发 BFC，但副作用天差地别：
-
overflow: hidden会裁剪所有溢出内容：box-shadow、tooltip、下拉菜单、position: absolute子元素全被截断 -
overflow: auto虽也触发 BFC，但可能意外出现滚动条（哪怕内容没溢出），行为不稳定 -
display: flow-root是专为创建 BFC 设计的值：不改变盒模型、不裁剪、不加滚动、不影响定位，连flex父容器里的子项都兼容
BFC 是局部屏障，不是全局开关——它只隔离当前容器内部与外部的 margin 交互；如果父容器已用 display: flow-root，那它的子元素之间仍可能重叠，除非它们自己也触发新 BFC 或加隔离层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
