contain: layout paint 必须配显式尺寸才生效，否则浏览器静默忽略；二者必须共存才能实现完整隔离，缺一不可；position: absolute 元素需确保包含块为容器自身，js 设置需把握时机并检测兼容性。
contain: layout paint 必须配显式尺寸才生效
浏览器对 contain: layout paint 的执行不是“写了就管用”，而是严格检查容器是否具备可预测的边界。没有 width 或 height、min-height、max-height 等明确尺寸声明时，Chrome 和 Firefox 会静默忽略该声明——你查 getComputedStyle(el).contain 仍返回 "layout paint"，但渲染行为毫无变化。
常见失效写法包括：height: auto、min-height: min-content、flex: 1、width: fit-content（Safari 中需前缀且仍不稳定）。这些值都依赖内容推导，破坏了 containment 所需的“尺寸承诺”。
- ✅ 推荐写死或设下限：
min-height: 200px、height: 120px、aspect-ratio: 16/9; width: 100% - ⚠️ 响应式场景慎用
min-height: clamp(120px, 5vh, 300px)：部分浏览器在视口缩放时可能判定为“不可预测” - ❌ 不要指望父级 flex/grid 容器“代为提供尺寸”：子项加
contain时，它自身仍需独立满足尺寸条件
为什么不能只用 layout 或只用 paint
contain: layout 单独启用，只能防止子元素位置/尺寸变化影响外部布局，但子元素改 background-color、opacity 或伪类样式时，仍可能触发父级样式重算和重绘；contain: paint 单独启用，则完全不拦尺寸变化——比如编辑器里一行文字换行撑高容器，滚动条立刻跳动，兄弟元素重排。
二者必须共存，浏览器才将该元素及其后代视为一个独立渲染上下文：layout 切断布局影响链，paint 切断绘制扩散链。缺一不可。
- ✅ 正确组合：
contain: layout paint - ❌ 废弃写法：
contain: content（Chrome 120+ 已移除，MDN 明确不推荐） - ⚠️
contain: strict等价于layout paint style size，其中size会强制忽略子内容对高度的贡献，富文本编辑器、折叠面板、动态列表等场景极易导致光标消失或内容裁剪
position: absolute / fixed 元素可能逃逸出 contain 边界
contain: paint 虽能裁剪溢出内容，但 position: absolute 默认以最近的「定位上下文」为基准，若该上下文在容器外（比如 body），菜单、提示框、拼写下划线等就会突破容器边界，导致隔离失效。
典型表现是：编辑器内右键弹出菜单闪现后消失、光标波浪线跑到工具栏下方、滚动时浮动按钮位置错乱。
- ✅ 解决方案：确保绝对定位元素的包含块就是编辑器容器本身，即给容器加
position: relative - ✅ 或加
overflow: hidden强制裁剪（注意这会截断position: fixed元素，慎用于模态框） - ❌ 不要依赖
contain: paint自动兜底：它不改变定位上下文，只做视觉裁剪
JS 动态设置 contain 的三个关键时机点
用 JS 写 el.style.contain = 'layout paint' 很容易白忙一场——不是赋值成功就等于优化生效。
- ✅ 插入大量子节点前先设：
el.style.contain = 'layout paint'，再el.innerHTML = html，避免插入过程触发父级重排 - ✅ 折叠/收起后清空：
el.style.contain = ''，否则contain: size（哪怕间接启用）可能锁死高度，阻碍动画收缩 - ❌ 避免在
requestAnimationFrame中反复 toggle：contain切换会重建渲染树，开销比不用还大 - ⚠️ 生产环境务必检测支持：
if ('contain' in document.documentElement.style)，iOS 微信 X5 内核和旧版 Safari 对size支持极差
真正容易被忽略的是：contain 不是 CSS 开关，而是你向浏览器做出的尺寸稳定性承诺。一旦内容撑破、定位越界、JS 强制读写 offset，这个承诺就失效，隔离效果瞬间归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
