contain 属性仅在尺寸确定、组合正确、位置可控时才限制重绘重排；单独写 layout 或 paint 无效，必须同时使用；contain: content 已废弃，strict 会隔离样式导致 filter 失效；需显式设置宽高、避免 auto/flex-1 等不确定尺寸；绝对定位元素易逃逸，应配 position: relative；JS 插入前须手动设 style.contain；需用 Paint Flashing 验证是否真正生效。
contain 属性真能限制重绘重排，但只在满足尺寸确定 + 组合正确 + 位置可控的前提下才生效；写错或漏条件，浏览器直接静默忽略，你根本看不出变化。
contain: layout paint 必须一起用，单写一个基本等于没写
只写 contain: layout，子元素改颜色、透明度、伪类样式，照样触发父级重绘；只写 contain: paint，子元素一撑高（比如图片加载、文字换行），父容器立刻重排、滚动条跳动。二者必须共存，浏览器才把该元素及其后代当作独立渲染上下文：layout 切断布局影响链，paint 切断绘制扩散链。
常见错误包括：
- 误用
contain: content—— Chrome 120+ 已废弃，MDN 明确标记为不推荐，行为不可靠 - 误以为
contain: strict更“强”就乱套用 —— 它等价于size layout paint style，会连 font-size、color 都隔离，导致父级 filter 或 backdrop-filter 失效
显式尺寸不是建议，是硬性门槛
浏览器对 contain: layout 或 contain: strict 的容器有尺寸可信度要求：它必须能提前确认边界，否则直接静默忽略。你看到 getComputedStyle(el).contain 返回 "layout paint"，不代表真生效。
立即学习“前端免费学习笔记（深入）”；
以下写法会让 containment 失效：
-
height: auto、min-height: min-content、width: fit-content - Flex/Grid 父容器里设
flex: 1却没给子项加min-height -
aspect-ratio在 Safari 中需前缀且仍不稳定
稳妥写法示例：.list-container { contain: layout paint; min-height: 300px; max-height: 600px; overflow-y: auto; }
position: absolute / fixed 元素容易逃逸 containment 边界
contain: paint 虽能裁剪溢出内容，但 position: absolute 默认以最近的定位上下文（可能是 body）为基准，菜单、提示框、下划线等就可能突破容器边界，导致隔离失效。
典型表现：
- 编辑器右键菜单闪现后消失
- 光标波浪线跑到工具栏下方
- 滚动时浮动按钮位置错乱
解决方案：确保绝对定位元素的包含块就是它自身容器，例如给容器加 position: relative，或改用 position: sticky + contain: paint 配合 overflow: clip。
JS 动态插入节点前必须手动设置 style.contain
Vue、React、Bootstrap 等框架大量依赖 JS 插入 DOM，这时时机比写法更重要。插入大量子节点前，必须先执行 el.style.contain = 'layout paint'，否则插入过程会触发父级重排；插入后若需动画展开（如 v-if 切换），收起时记得清空：el.style.contain = ''，否则高度可能被锁死。
生产环境务必检测支持：if ('contain' in document.documentElement.style)；Safari 对 size 实现有偏差，iOS 微信 X5 内核基本不支持 strict。
验证是否真正生效，不能只看 CSS 声明写了没，得看渲染行为：Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”，滚动或更新时闪光必停在容器内——否则就是没生效。
