css margin 塌陷是什么原因怎么解决

四条思路都对，但真能长期维护的其实只有两条：全站约定统一只用 margin-bottom 单向排布，父子塌陷用 display: flow-root 作为父元素来阻止外边距合并。另外你父子那节好像被截断了，我补几个实际踩过的点。

overflow: hidden / auto 虽然是老牌 BFC 方案，但它会裁剪溢出内容，下拉菜单、tooltip、box-shadow 都会被切掉，还会让内部的 position: sticky 失效，所以能上 flow-root 就别用它。它唯一的问题是 IE 全系不认，真要兼容老 IE 再退回 overflow: hidden 或 ::after 清浮动。

用 padding 或 border 隔开父子时，要注意两点：一是父元素自己的 margin-top 并没有消失，它还会继续和更外层的元素塌陷，很多人加了 padding 发现整块往下掉了 20px 就是这个原因；二是底部也有同样的问题，最后一个子元素的 margin-bottom 会穿透成父元素的 margin-bottom。这两个位置最好一起处理。

空元素那类场景别再用空 div 撑间距了，直接换成 flex column 加 gap，或者只给有内容的元素写 margin-bottom。

最后补一句容易忽略的：flex/grid 的子项不参与外边距塌陷，但容器本身和外部的兄弟元素照旧会塌，别以为套了 flex 就全都免疫了。

你补的这几点都踩在实处，尤其“父元素自己的 margin-top 还会继续往外塌”，这是加了 padding 之后整块往下掉最常见的原因，很多人误以为是 padding 本身的锅。

再补三个细节：一是隔断父子塌陷其实不用真塞 padding，::before { content: ""; display: table } 这种 clearfix 伪元素同样有效，它本质上是给父元素加了内容阻隔，不裁剪、不产生滚动条，老 IE 也认，正好可以当 flow-root 的降级方案；如果想按特性判断，套一层 @supports not (display: flow-root) 写 overflow: hidden 就够了。

二是 flex 的 gap 有个坑：Safari 14.0 及更早版本不支持 flex gap（14.1 才补上），而 grid gap 一直支持得很好。要照顾那一代浏览器，用 > * + * { margin-top: 16px } 比 :not(:last-child) 省事，最后一个元素天然不产生多余外边距。

三是你提的“容器本身还会跟外部塌陷”这点特别关键——BFC 只隔离内部和外部，两个相邻的 BFC 元素之间的 margin 照样合并，所以别指望给整块套个 flow-root 就把兄弟间距一并修好。

延伸一句：如果站点开始组件化，建议把间距抽成 --space 变量，只在组件根节点写 margin-block-end，组件内部一律归零，塌陷问题在写样式那一刻就被绕开了。

第 3 点我完全同意——两个相邻的 BFC 之间该合并还是合并，flow-root 只隔内部不隔外部，这点我上次回复里也强调了。另外两个点我补一点代价。

::before { content: ""; display: table } 做降级没问题，但有两个副作用。一是它同时做了两件事：插入内容阻隔，加上 display: table 生成匿名表格盒，等于双重保险，但父元素本身是 flex/grid 容器时，这个伪元素会变成一个真正的子项，参与 gap 计算，也会被 justify-content 排序；这时要么改用 overflow 方案，要么保证容器不是 flex/grid。二是 display: table 的伪元素在某些情况下会带来微小的高度或基线影响，跟纯 flow-root 并不完全等价，做全局重置的话，建议把它只写成工具类按需挂，别塞进 *::before 这种通配里。

> * + * 我平时也用，但有个坑要提醒：它会选到容器里的 <script>、<template> 这类不可见元素。虽然它们不占位，但「script 之后那个元素」会被误判成非首项，白拿一份 margin-top，结果就是整块内容顶部多出 16px。容器里可能混入 script 标签的场景，加一句 > * + *:not(script):not(template)，或者干脆改用 :not(:first-child)。

变量那套我赞成，margin-block-end 配合组件根节点写、内部归零，确实是根治思路；再往前一步就是等 block 布局的 row-gap 兼容性够用后，连方向约定都能省掉，不过现在还没到能放心上的程度。

【结论】后两点我都认，但 > * + * 换成 :not(:first-child) 并不能避免这个问题，因为两者选中的元素集合完全一样。

容器里放一个 <script> 再跟两个 div 时，> * + * 会选中第一个 div（它前面有 script）和第二个 div；:not(:first-child) 选中的也还是这两个，第一个可见元素顶部那 16px 照样多出来。真要绕开，得让选择器两端都不匹配不可见标签：> :not(script, style, template) ~ :not(script, style, template)。因为 script 不匹配左侧的 :not(...)，它后面那个 div 就不会被判定成“非首项”，这才是从根上排除的办法。当然前提是这些标签确实在容器直系，嵌套深一层就又是另一回事了。

【结论】你说得对，> * + * 和 > :not(:first-child) 在直系子元素里选中的集合确实完全一样，我上一条把它们当替代方案是错的；> :not(script, style, template) ~ :not(script, style, template) 才真正从根上排掉了这类误判。

展开说下为什么它成立：~ 要求左侧存在匹配的兄弟，而 script 不匹配左侧那个 :not(...)，所以紧跟 script 的 div 不会被判定成"非首项"，那份多余的 16px 自然就没了，链路是对的。这比在右侧加条件靠谱得多，右侧怎么写都拦不住"前面有个不占位元素"这件事。

但有个坑得提前说：:not() 接受选择器列表是 Selectors Level 4，Chrome 88 / Firefox 84 之后才支持，老浏览器是整条选择器解析失败、规则被整条丢弃，比原来多 16px 严重得多。所以要么包在 @supports selector(:not(a, b)) 里，要么只写在具体组件的局部样式里，别进全局 reset。

另外提一句，script / template / style 默认 display: none 不生成盒子，容器只要是 flex/grid + gap，它们压根不参与布局，这个坑自动不存在。所以我的实际取舍是：需要相邻选择器的 block 流场景，基本就是列表和卡片堆叠，容器里混 script 的概率很低；真混进去了，通常说明这个容器是给 JS 挂载用的，直接换 flex + gap 更省心。

最后补一个选择器管不到的情况：容器里放个 display: none 的空占位 div，它照样算"前一个兄弟"，顶部还是会多出一份间距，这种只能靠布局方式解决，不是选择器能兜住的。

【结论】同意，@supports selector(...) 这个提醒是最关键的一条——不支持的浏览器是整条选择器解析失败、规则丢弃，而降级方向恰好是我们想要的，所以它比塞进全局 reset 安全得多。

展开一下这个“安全”在哪：老浏览器不认识 @supports selector() 这个条件本身，整个 @supports 块会被忽略，块外的规则原样保留，等于自动回落到不带相邻选择器的写法，而不是错误地生效一半。所以这个组合写法其实可以放心用，只要基础规则在块外写全。另外这条选择器权重不低，如果放 reset 里，建议套一层 @layer reset 或 :where() 压一压，免得后面组件样式改不动。

display: none 的空占位那个补充我认，而且这正是选择器和布局的分界线——选择器匹配的是 DOM 结构，display: none 是计算样式，:not() 无从感知。这里可以再分个层：真正让 gap 失效的是 visibility: hidden、有高度的空占位、<br> 这类还会生成盒子的东西；display: none 的在 flex/grid 里根本不生成盒子，不参与 gap，所以这个坑只在 block 流 + 相邻选择器时存在，换布局就没了。

顺带说一句，> :not(...) ~ :not(...) 只管直系，中间包一层 wrapper 就全失效，这和“容器里混 script 通常说明它是 JS 挂载点”是同一个判断——这种信号出现时直接换 flex + gap，比继续加选择器划算。block 布局的 row-gap 具体落地版本我记不准，上生产前还是查一下 caniuse 更稳。

【结论】同意你说的“降级方向恰好是我们想要的”，但这条链上有个反直觉的地方：同样用来压权重的 @layer 恰恰不能当兜底，它的降级方向是反的。

展开说一下：@supports 是条件组，浏览器不认这个条件就按 false 跳过整块、块外规则原样生效，这就是它安全的原因；而 @layer 不是条件组，老浏览器不认识 @layer 这个 at-rule，会连同花括号里的规则整块丢弃，所以把 reset 放进 @layer 等于把兜底交给了最不兼容的那一层。真要压权重，用 :where() 更稳，不支持时也只废掉那一条选择器，不会牵连整个 reset。顺带一个细节：@supports selector() 本身要到 Safari 14.1 才认，而 :not() 接受列表 Safari 9 就实现了，中间那批 Safari 是“有能力但检测不出来”，会白白走降级分支——不是错，但知道原因能少排查半天。