contain: layout paint 必须同时使用才能完整隔离渲染，单用layout无法阻止样式变更触发父级重绘，单用paint无法防止尺寸变化导致外部重排；且必须配合显式高度（如min-height）才生效。
contain: layout paint 为什么必须一起写
单独写 contain: layout 或 contain: paint 基本没用。只开 layout，子元素改颜色、透明度仍会触发父级样式重算；只开 paint，子元素一撑大容器（比如图片加载、文字换行），就会导致外部重排。二者必须共存，才能同时切断“布局影响链”和“绘制扩散链”。contain: content 在 Chrome 120+ 已被废弃，MDN 明确标记为不推荐，行为不可靠，别用。
为什么显式宽高是硬门槛，不是可选项
浏览器对 contain: layout 或 contain: strict 的容器有尺寸可信度要求：它必须能提前确认边界，否则直接静默忽略声明——你看到 getComputedStyle(el).contain 返回 "layout paint"，不代表真生效。
-
height: auto、min-height: min-content、width: fit-content都会让浏览器判定“尺寸不可控”，隔离失效 - 稳妥写法：
min-height: 300px; max-height: 800px; overflow-y: auto;—— 下限防塌陷，上限锁死重绘区域高度 - Flex/Grid 容器里的子项加
contain，若父容器没设确定尺寸（如flex: 1且无min-width），同样不生效
哪些场景加了反而坏事
contain: strict 看似最强，但风险最高。它等价于 layout paint style size，而 size 会强制浏览器“绝对相信”容器尺寸永不变化。稍有不慎就出问题：
- 富文本编辑器根容器、Markdown 预览区、可折叠标题区域——内容高度动态，加
strict会导致光标跳脱、选区不可见、滚动锚点错乱 - 含
position: absolute子元素且依赖外部定位的容器——contain: layout会创建新 containing block，改变定位基准 - 父容器是
display: flex或grid，子项用了align-self/justify-self——layout隔离后，这些对齐属性直接失效
怎么验证它真起作用，而不是自我安慰
别信 CSS 声明写了、控制台查得到。真实效果只能靠渲染行为验证：
- Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”：滚动或触发更新时，闪光必须严格限制在容器内框中，不外溢到工具栏或页脚
- Performance 面板录制操作，对比前后 “Layout” 和 “Update Layer Tree” 时间是否明显下降
- 对
contenteditable区域打字、拖选、呼出浮动菜单，观察工具栏是否完全不动——动了，说明隔离失败
最常被忽略的一点：JS 动态插入节点前，必须先设 element.style.contain = 'layout paint'；收起折叠面板后，记得清空 el.style.contain = ''，否则 size 可能锁死高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
