contain: paint 单独用于定位元素基本无效，必须配合 contain: layout 且让元素成为自身 containing block（如加 position: relative），并设置显式尺寸（如 min-height）才能阻止重排。
contain: paint 单独加在定位元素上基本无效
给 position: absolute 或 position: fixed 元素直接写 contain: paint，浏览器会裁剪绘制区域，但完全拦不住重排——因为定位元素的尺寸变化（比如 tooltip 内容变长、下拉菜单高度浮动）仍会向上影响 containing block 的布局计算。更糟的是，paint 不提供任何 layout 隔离，滚动或动画时父容器仍可能被拖着重绘。
常见错误现象：.tooltip 展开后页面轻微抖动、.dropdown-menu 加载图标时工具栏位移、fixed 按钮在富文本编辑器中随光标移动错位。
- 只加
contain: paint→ 无法阻止子内容撑开导致的父级重排 - 只加
contain: layout→ 定位元素脱离文档流，layout失去作用对象，声明被静默忽略 - 真正起效的前提是：该定位元素的 containing block 必须是它自己（即创建新的定位上下文）
必须让定位元素成为自己的 containing block
默认情况下，position: absolute 元素以最近的「已定位祖先」为 containing block；如果那个祖先在 #app 或 body 上，而它们又没设显式尺寸，那整个隔离就失效了。要让 contain 生效，得先让这个定位元素“自立门户”。
- 给定位元素本身加
position: relative（哪怕它原本是absolute），并配contain: layout paint - 同时确保它有可预测尺寸：
min-width+min-height，或aspect-ratio+width - 避免用
height: auto、max-content、flex: 1等依赖内容推导的值 - 若它是
fixed，需额外确认其top/right/bottom/left值不触发回流（比如避免top: 50vh在 resize 时反复重算）
JS 动态插入前必须手动设置 style.contain
Bootstrap、Element Plus、Ant Design 这类组件库的弹层往往由 JS 插入 DOM，此时 CSS 类名还没挂上，浏览器已按默认逻辑完成首次布局。等你再加 contain: layout paint 类，为时已晚——重排早已发生。
立即学习“前端免费学习笔记（深入）”；
- 插入节点前执行：
el.style.contain = 'layout paint'; - 若后续有展开/收起动画（如
v-if切换），收起时务必清空：el.style.contain = '';，否则高度会被锁死 - 验证是否生效不能只看
getComputedStyle(el).contain，得打开 Chrome DevTools → Rendering → ✅ Paint flashing，观察动画过程中只有该区域闪烁 - 移动端尤其注意：iOS Safari 16.4+ 才稳定支持
paint，旧版静默忽略；微信 X5 内核至今不支持size，strict直接失效
绝对定位场景下 strict 和 content 都要慎用
contain: strict 看似“更彻底”，但它强制隔离 font-size、color 等继承属性，一旦父级用了 filter 或 backdrop-filter，效果就断在边界外；contain: content（等价于 layout paint style）不带 size，会导致动态高度的 tooltip 计算失准，滚动时频繁重排。
- 推荐组合：
contain: layout paint+ 显式min-height+max-height+overflow-y: auto - 禁用组合：
contain: strict用于带transform的浮层（可能丢失合成层）、contain: content用于下拉菜单（高度不可控） - 真实生效的关键不是语法对不对，而是：该元素的尺寸是否在 JS 插入前就能被浏览器 100% 确认——哪怕只是个保守的
min-height: 240px
