contain: layout paint 必须同时声明且配显式尺寸才生效，单用任一值或缺尺寸会被浏览器静默忽略；二者共存可切断布局外溢与绘制扩散，显式高度如min-height是硬性前提。
contain: layout paint 必须同时声明才起作用
只写 contain: layout 或只写 contain: paint，浏览器会静默忽略隔离意图。layout 单独存在时，子元素改 background-color、opacity 或伪类状态仍会触发父级样式重算；paint 单独存在时，子元素文字换行、图片加载撑高容器，立刻导致外部重排。二者必须共存，浏览器才将该元素视为独立渲染上下文——布局变动不外溢，绘制更新不扩散。
显式尺寸是生效的硬性前提
没有可预测宽高，contain: layout paint 就是摆设。浏览器看到 height: auto、min-height: min-content、flex: 1（父容器无固定高度）或 width: fit-content，直接跳过隔离逻辑。即使 getComputedStyle(el).contain 返回 "layout paint"，也代表声明被解析了，不代表真生效。
稳妥写法包括：
-
min-height: 240px（防塌陷） +max-height: 600px（锁死重绘区域） -
height: 120px或aspect-ratio: 16/9 -
width: 100%配合父容器有明确width或max-width
绝对定位子元素可能逃逸出 contain 边界
给 position: absolute 元素本身加 contain: layout paint，会创建新的 containing block，导致其 top/left 计算基准从最近定位祖先变成自身，视觉上突然偏移。更常见的是：父容器加了 contain，但子项是 position: absolute 且定位上下文在容器外（比如锚定到 body），结果菜单、下划线、浮动按钮直接突破容器边界。
解决路径很窄：
- 确保该容器设了
position: relative，且自身尺寸可控 - 避免把
contain加在 transform 动画根节点上——它会截断filter、backdrop-filter等继承链 - 对弹层类组件（如
.dropdown-menu），优先用contain: paint而非strict，除非你确认它完全脱离文档流
JS 动态插入前必须手动设置 style.contain
Vue 的 v-if、React 的 useState 切换显示时，DOM 插入瞬间就触发重排——此时 CSS 规则还没来得及匹配生效。正确做法是在插入大量子节点前，先执行 el.style.contain = 'layout paint'。
收起时若用了 height: 0 + overflow: hidden 动画，记得清空：el.style.contain = ''。否则容器真实高度变化后，contain 仍按旧尺寸隔离，造成内容错位或滚动异常。
最常被忽略的一点：验证不能只靠控制台查值，得开 Chrome DevTools → Rendering → 勾选 “Paint Flashing”，看动画或滚动时闪光是否严格限制在容器内框中——外溢了，就是没真正隔离成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
