display: flow-root能阻止父子margin重叠，因为它为父元素创建BFC，阻断子元素margin向外穿透；需作用于父元素自身，现代浏览器支持良好但IE不支持。
外边距重叠不是 bug，是 CSS 规范明确定义的行为——只要满足垂直相邻、块级、标准流、无隔离这四个条件，margin-top 和 margin-bottom 就会合并，取最大值（或按规则计算），而不是相加。
为什么 display: flow-root 能阻止父子 margin 重叠
因为 display: flow-root 会为该元素创建一个新的 BFC（块级格式化上下文），而 BFC 的边界会阻断其内部子元素的 margin 向外“穿透”。关键点在于：必须作用在**参与重叠的父元素自身**上，改子元素无效。
- 它不改变子元素的布局流，也不裁剪溢出内容（对比
overflow: hidden更安全） - 现代浏览器支持良好（Chrome 58+、Firefox 55+、Safari 15.4+），但 IE 完全不支持
- 如果父容器已有
overflow: hidden，别急着删——先确认子元素是否真有下拉菜单、tooltip 或阴影溢出
父子重叠时，padding-top: 1px 比 border-top 更稳妥
给父元素加 padding-top: 1px 是最轻量、兼容性最好、副作用最小的破局方式：它直接破坏“无 padding”这一重叠前提，且不会影响 box-sizing 计算或响应式宽度。
-
border-top: 1px solid transparent看似等效，但在高对比度模式下可能意外显形为灰线 - Tailwind 等工具开启 purge 时，
border-transparent类可能被误删，线上失效 -
padding-top: 0.1px虽技术可行，但语义模糊，调试和协作时容易引发困惑
兄弟元素间 margin 重叠，优先用 margin-bottom 单向约定
对列表、段落、卡片组这类线性结构，统一只设 margin-bottom，再配合 :last-child { margin-bottom: 0; } 清除末尾，比逐个调 margin-top 更可控、更不易漏。
立即学习“前端免费学习笔记（深入）”；
- 避免出现“两个元素都设了
margin-top和margin-bottom”，导致间距翻倍又塌陷的混乱局面 - Flex 布局中子项默认不参与 margin 折叠，但若你已用
display: flex却还看到重叠，大概率是父容器没设flex-direction: column，或子项被设了display: block覆盖了默认行为 - Grid 布局完全绕过 margin 折叠，但
gap是更推荐的间距控制方式——它不依赖元素自身 margin，逻辑更干净
真正容易被忽略的是：重叠只发生在「同一 BFC 内」。一旦你用 display: flow-root 或 overflow: hidden 包了一层，那层内部的父子/兄弟重叠就消失了，但它和外部其他元素之间仍可能重叠——BFC 是局部屏障，不是全局开关。
