isolation 属性不影响外边距合并，仅创建层叠上下文；阻断 margin 合并需用 display: flow-root、overflow: hidden 等触发 BFC 或物理隔离手段。
isolation 属性本身不会影响外边距合并（margin collapse）。它只控制是否为元素创建独立的层叠上下文（stacking context），与块格式化上下文（BFC）无关，也不改变 margin 的参与资格或计算逻辑。
isolation 的作用范围很窄
- 它仅决定该元素及其子树是否被隔离进一个新的层叠上下文（类似
z-index生效的前提），用于解决混合模式（如mix-blend-mode）或透明度叠加时的渲染顺序问题。 - 它不触发 BFC，因此无法阻断父子或兄弟间的 margin 合并。
- 即使设为
isolation: isolate，父元素若仍无border、padding、overflow或display: flow-root，子元素的margin-top依然会穿透并与其上边缘合并。
常见误判场景
- 看到加了
isolation: isolate后“好像不塌陷了”，大概率是：- 同时加了其他属性（比如
overflow: hidden），真正起作用的是后者； - 浏览器 DevTools 中误读 computed 值（
margin-top显示为 0 并非因isolation，而是因父容器高度塌陷后边界未渲染）； - 子元素本身被
transform或position: absolute脱离文档流，从而不再参与合并——这和isolation无关。
- 同时加了其他属性（比如
真正能阻断 margin 合并的替代方案（按推荐顺序）
-
display: flow-root：语义明确、无副作用、现代浏览器全覆盖（Chrome 64+ / Firefox 59+ / Safari 15.4+） -
overflow: hidden（或auto）：兼容性好，但可能意外裁剪box-shadow、position: absolute子元素 -
padding-top: 1px或border-top: 1px solid transparent：物理隔断，轻量但需注意盒模型尺寸变化 - 改用
gap（仅限 Flex/Grid 容器）：彻底绕开 margin，响应式更可控
isolation 是个“隐身”属性——它改不了布局流，也拦不住 margin 合并。真正要稳住父子间距，得靠 BFC 触发或物理隔离，而不是层叠上下文。
