contain: layout paint 是唯一实用的起点，因单用 layout 无法阻止样式重算、单用 paint 不拦尺寸变化，二者组合才能同时切断布局影响链和绘制扩散链。
直接加 contain: layout 或单独用 contain: paint 基本无效，必须组合使用且容器尺寸可控，否则浏览器静默忽略或引发塌陷。
为什么 contain: layout paint 是唯一实用的起点
单开 layout 无法阻止子元素样式变更（如颜色、透明度）触发父级样式重算；单开 paint 不拦尺寸变化，子元素一撑大容器，外部立即重排。两者绑定才能同时切断“布局影响链”和“绘制扩散链”。
-
contain: content已被 Chrome 120+ 废弃，MDN 明确标记为不推荐，行为不稳定，别用 -
contain: strict等价于layout paint style size，但size子项会强制忽略子内容对高度的贡献——若列表项高度浮动，容器可能塌成0px - 移动端长列表、折叠面板、徽标组件等场景，
contain: layout paint覆盖 90% 有效用例，且兼容性好（Chrome 56+、Firefox 69+、Safari 15.4+）
容器没写宽高，contain 就等于没写
浏览器要求 contain: layout 或 contain: strict 的容器必须有可预测的尺寸上下文，否则直接跳过该声明——你查 getComputedStyle(el).contain 看起来生效了，但 DevTools 里 Paint Flashing 仍满屏乱闪。
- 显式写
width和height最稳妥，比如卡片固定高：height: 120px - 响应式场景优先用
min-height或aspect-ratio+width: 100%，避免min-content、fit-content这类依赖内容的值 - Flex/Grid 容器内的子项加
contain，若父容器未设确定尺寸，同样失效
JS 动态设置时最容易踩的三个坑
不是调 el.style.contain = 'layout paint' 就完事，时机、配套操作和兜底判断缺一不可。
- 插入大量子节点前先设
contain，否则插入过程会触发父级重排；插入后若需动画展开，记得收起时清空el.style.contain = ''，否则size可能锁死高度 - 监听
resize时，只对已知固定尺寸区域（如顶部工具栏）补layout paint，动态宽度侧边栏不能加size - 生产环境务必检测支持：
if ('contain' in document.documentElement.style)，Safari 对size实现仍有偏差，iOS 微信 X5 内核基本不支持strict
验证是否真生效，别信 getComputedStyle
声明写了、控制台查得到，不代表浏览器真执行了隔离。真实效果得看渲染行为本身。
- 打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”，滚动或更新时，闪光应严格限制在目标容器内部
- 勾选 “Layout Shift Regions”，若折叠/展开区域周围不再出现大片红色高亮，说明
layout隔离成功 - Performance 面板录制操作，对比前后 “Layout” 和 “Update Layer Tree” 时间下降明显，才是硬指标
真正难的不是加那行 CSS，而是确认容器边界是否稳定、子元素是否越界、浏览器是否真的信任这个承诺——这些细节一旦漏掉，contain 不是提速，而是制造新抖动源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
