contain: layout paint 必须同时使用且容器需设显式尺寸（如min-height）才生效，单用任一值或缺尺寸会导致浏览器静默忽略；二者共存可切断布局外溢与绘制扩散，显式高度是硬性前提。
直接说结论：contain: layout paint 必须同时写，且容器必须有可预测的显式尺寸（如 min-height），否则浏览器静默忽略——你看到样式生效了，不代表它真在隔离渲染。
contain: layout paint 必须一起用，单用等于没写
只加 contain: layout，子元素改颜色、透明度、文字内容，依然会触发父级样式重算；只加 contain: paint，子元素一撑高（比如图片加载、文字换行），父容器立刻重排。二者共存才能同时切断“布局外溢”和“绘制扩散”两条链路。
-
contain: content在 Chrome 120+ 已被废弃，MDN 明确标记为不推荐，别用 -
contain: strict等价于layout paint style size，但size会强制浏览器“绝对相信”尺寸不变，稍有动态高度就出问题（光标跳脱、滚动错位） - 常见错误现象：控制台查
getComputedStyle(el).contain返回"layout paint"，但动画/滚动帧率毫无提升——大概率是被浏览器跳过了
显式尺寸不是建议，是硬性前提
浏览器对 contain: layout 容器有尺寸可信度要求：它得能在布局前确认边界。以下写法都会让隔离失效：
-
height: auto、min-height: min-content -
flex: 1且父容器无固定高度约束 -
width: fit-content或依赖内容撑开的宽高
稳妥写法示例：min-height: 240px; max-height: 600px; overflow-y: auto;。下限防塌陷，上限锁死重绘区域，特别适合下拉菜单、弹窗这类定位频繁变动的容器。
立即学习“前端免费学习笔记（深入）”；
绝对定位元素加 contain 要小心 containing block 偏移
给 position: absolute 的元素（如 .dropdown-menu）加 contain: layout paint，会创建新的 containing block，导致其 top/left 计算基准从最近定位祖先变成自身，视觉上突然偏移。
- 解决办法：确保该元素的定位上下文稳定（比如父级设
position: relative且尺寸可控） - 避免在
transform动画根节点上直接套contain: strict，它会隔离font-size、color等继承属性，可能截断filter或backdrop-filter效果 - JS 动态插入前必须手动设
el.style.contain = 'layout paint'，否则 DOM 插入瞬间就会触发重排——CSS 规则还没来得及生效
验证是否真生效，不能只看 CSS 声明
真实效果只能靠渲染行为验证：
- Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”：滚动或触发更新时，闪光必须严格限制在容器内框中，不外溢到工具栏或页脚
- Performance 面板录制操作，对比前后 “Layout” 和 “Update Layer Tree” 时间是否明显下降
- 对
contenteditable区域打字、拖选、呼出浮动菜单，观察工具栏是否完全不动——动了，说明隔离失败
最常被忽略的一点：JS 动态插入节点前，必须先设 element.style.contain；收起时若用了 height: 0 + overflow: hidden 动画，记得清空 el.style.contain = ''，否则真实高度变化后，contain 会继续按旧尺寸隔离，造成错位。
