contain: layout 单独使用无效，必须与 paint 共存且配显式尺寸才生效；否则浏览器静默忽略，无法切断布局外溢和绘制扩散，绝对定位元素加该属性还可能偏移 containing block。
contain: layout 单独使用基本无效
只写 contain: layout 无法阻止父容器重排或重绘。比如子元素改 color、opacity、文字内容，仍会触发父级样式重算；子元素图片加载后撑高，父容器照样重排。浏览器不会报错，但隔离链路是断的——它只切掉了“布局外溢”，没管“绘制扩散”。真正起效必须搭配 contain: paint，二者共存才构成完整隔离。
显式尺寸是生效前提，不是可选项
即使写了 contain: layout paint，若容器高度不可预测，浏览器直接静默忽略。以下写法都会失效：
-
height: auto或min-height: min-content -
flex: 1且父容器无固定高度约束 -
width: fit-content或依赖内容撑开的宽高
稳妥做法是设像素级边界：min-height: 240px; max-height: 600px; overflow-y: auto;。下限防塌陷，上限锁死重绘区域，特别适合下拉菜单、弹窗这类定位频繁变动的容器。
绝对定位元素加 layout 会改变 containing block
给 position: absolute 的元素（如 .dropdown-menu）直接加 contain: layout paint，会创建新的 containing block，导致其 top/left 计算基准从最近定位祖先变成自身，视觉上突然偏移。
解决办法：
- 确保父级有
position: relative且尺寸可控 - 避免在 transform 动画根节点上套
contain: strict，它会截断filter或backdrop-filter - 优先用于 Modal、Tooltip 这类完全独立浮层，而非嵌套在布局流中的定位元素
JS 动态插入前必须手动设 style.contain
Vue/React 中通过 v-if 或 useState 控制显示的弹层，DOM 插入瞬间就触发重排——此时 CSS 规则还没来得及生效。
正确时机：
- 插入大量子节点前，先执行
el.style.contain = 'layout paint' - 收起时若用了
height: 0+overflow: hidden动画，记得清空：el.style.contain = ''，否则真实高度变化后，contain 会继续按旧尺寸隔离，造成错位 - 搭配
content-visibility: auto时，contain-intrinsic-size必须设像素值（如contain-intrinsic-size: 80px），不能用em或%
最常被忽略的是：生效与否不看 getComputedStyle(el).contain 返回什么，而要看 Chrome DevTools → Rendering → “Paint Flashing” 是否严格限制在容器内框中。闪光外溢，说明隔离失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
