margin外边距重叠不是bug而是CSS规范行为；兄弟元素垂直margin取较大值合并，父子间margin-top会穿透导致父容器下移，空元素自身上下margin折叠为单值，display:flow-root可有效阻止。
margin 外边距重叠本身不是 bug，是 CSS 规范明确要求的行为；布局异常的根源在于开发者误以为「两个 margin 相邻 = 距离相加」，而实际它会按规则合并，导致视觉间距小于预期，或父容器被“顶开”。
兄弟元素间 margin-bottom 和 margin-top 合并后间距变小
两个垂直排列的块级元素，一个设 margin-bottom: 20px，另一个设 margin-top: 30px，它们之间的实际距离是 30px（取较大值），不是 50px。
- 这是排版设计初衷：避免段落、标题等连续块元素因上下 margin 双重叠加造成过大空白
- 但若你刻意依赖“上下都设 margin”来控制不同方向的留白（比如顶部留白靠
margin-top，底部靠margin-bottom），就会出错 - Flex/Grid 布局中子元素不参与该行为——
gap完全不受影响，且语义更清晰
父子元素间 margin-top 穿透导致父容器整体下移
当父容器没有 border、没有 padding、未触发 BFC（如 overflow: hidden 或 display: flow-root），且第一个子元素设置了 margin-top，这个值会直接“冒泡”到父容器外部。
- 结果不是子元素离父顶 20px，而是整个父容器从页面顶部下移 20px
- 常见于卡片、弹层、评论列表等封装组件——你改子元素没用，必须动父容器
-
display: flow-root是首选：不裁剪position: absolute子元素，不引入滚动条，Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持 -
padding-top: 0.1px是兼容 fallback：视觉无感，但足以打断合并条件链
空块元素自身 margin-top 和 margin-bottom 折叠成单值
一个空的 div 同时设了 margin-top: 40px 和 margin-bottom: 20px，最终对外表现只有 40px 的外边距（正数取大）。
- 常出现在占位符、分隔线、响应式隐藏后残留的空元素上
- 解决方式简单：加
min-height: 0、border: 1px solid transparent或padding: 1px即可打破折叠条件 - 注意：仅设
height: 0不行，因为高度为 0 且无内容、无 padding、无 border 时仍满足折叠前提
display: flow-root 可能增加冗余 DOM；统一用 gap 或重构为 Flex/Grid 才是根治思路。BFC 是局部屏障，加一层不等于一劳永逸——得看哪一级参与了合并。 
