contain: layout paint 可隔离 DOM 变更影响，但需尺寸稳定、子元素不越界且浏览器支持；单用其一效果不足，须组合使用才能阻断布局与绘制扩散链。
用 contain: layout paint 明确声明容器边界，浏览器就能把 dom 变更的影响锁在该子树内，不向上扩散到父级或兄弟元素——但前提是容器尺寸稳定、子元素不越界，且目标浏览器支持。
layout + paint 是最实用的组合
这两个值必须一起用，才能真正切断“布局影响链”和“绘制扩散链”：
-
contain: layout 阻断子元素位置/尺寸变化对父级和兄弟节点的影响，比如增删子节点、切换
display、修改width/height（只要容器自身尺寸不变） -
contain: paint 强制内容裁剪，并让浏览器跳过不可见区域的绘制；还能防止文本更新、
opacity动画、visibility: hidden切换等触发外部重绘 - 只设其中一个，隔离效果会大打折扣：单用
layout，颜色或透明度变化仍可能引发父级样式重算；单用paint，文字换行或图片加载撑开容器，就会导致外部重排
尺寸稳定是生效的前提
浏览器需要可信的边界才能安全跳过全局遍历。一旦尺寸不可预测，Chrome 会静默降级（比如退化为仅 style paint），隔离就失效了：
- 推荐显式设置
width和height，或用aspect-ratio+width: 100% - 避免
width: fit-content、height: auto、min-height: max-content这类依赖内容的值 - 响应式场景下，用
min-width/max-width替代弹性宽度，或确保父容器有明确尺寸
注意哪些情况会突破隔离
Containment 不是万能屏障，以下操作会让变更“逃出”容器边界：
-
position: fixed元素默认参照视口，必然越界；position: absolute若top/left用calc(100% - 20px)等依赖外部尺寸的写法，也会失效 - Flex/Grid 容器内的子项，
contain: layout无法切断轴向分配逻辑（如flex-grow分配剩余空间） - 使用
counter-increment时，若需防止计数器污染外部，要额外加上style值
JavaScript 动态设置的关键时机
不是加了 contain 就立刻起效，时机不对反而浪费性能：
立即学习“前端免费学习笔记（深入）”；
- 必须在元素插入 DOM 之前 设置，比如
el.style.contain = 'layout paint'写在document.createElement()后、appendChild()前 - 折叠面板收起后建议清空
contain（设为空字符串），否则contain: size可能锁死高度，阻碍收缩动画 - 验证是否生效别只看
getComputedStyle，打开 DevTools 的 Paint Flashing，观察重绘区域是否真的被框定在容器内
