contain: paint 不防止视觉溢出，仅隔离绘制；需配合 layout 且容器必须有明确尺寸（如 min-height）才生效，单独使用无效。
contain: paint 不能防止视觉溢出，别当 overflow:hidden 用
加了 contain: paint 后内容还是“飞出去”了？不是它失效，是它根本没这个功能。这个属性只告诉浏览器：“这个元素的绘制可以独立进行，子元素画到外面也别连累别人重绘”。它不裁剪、不隐藏、不改变布局——position: absolute 子项照常越界，box-shadow 和 transform 也照常渲染。如果你看到内容被截掉，大概率是同时写了 overflow: hidden 或父级有 clip-path，不是 contain: paint 干的。
常见误用场景：
- 给浮动容器加
contain: paint试图“收住”溢出的 float 子项 → 无效，浮动塌陷问题得靠display: flow-root或 Flex/Grid 解决 - 对
body或根级元素加contain: paint→ 浏览器静默忽略，还可能破坏 fixed 定位和滚动逻辑 - 容器没设宽高，只写
contain: paint→ Chrome/Firefox 直接跳过，DevTools 的 Computed 面板里都看不到生效痕迹
contain: layout paint 才是完整隔离，单用 layout 或 paint 都白搭
响应式嵌套中频繁重排重绘，真正起效的是组合值 contain: layout paint。只用 layout，子元素改颜色或 opacity 还是会触发外层重绘；只用 paint，子元素高度突变（比如折叠面板展开）会导致兄弟元素跳动、滚动条抖动。二者必须共存，才能切断布局传播 + 锁定绘制边界。
实操要点：
- 容器必须有明确尺寸：至少声明
min-height或height（height: auto、flex: 1、max-content均不满足） - 避免用于需要自动撑高的场景：比如卡片容器设了
height: auto，再加contain: layout就会变成 0 高 - Flex/Grid 容器慎用
contain: layout：它们的布局逻辑依赖外部上下文，隔离后子项排列可能异常
contain: content 比 strict 更安全，size 是最危险的取值
contain: strict 等价于 layout paint size，而 size 是那个容易翻车的变量。它强制浏览器“无视子内容真实尺寸”，一旦图片加载、文字换行撑高容器，轻则内容被裁，重则渲染为 0×0。尤其在多层定位嵌套中（比如 position: relative 卡片里套 position: absolute badge），contain: strict 会让容器失去对 badge 尺寸的感知，高度直接归零。
更稳妥的选择是 contain: content（即 layout paint）：
- 保留尺寸响应性：子元素变化仍能影响容器高度，适合动态卡片、虚拟滚动列表项
- 不破坏文档流基准：不会导致
position: fixed错位或滚动条异常 - 避开 Safari 对
contain: size的实现偏差：比如子元素font-size变化时，高度锁定可能失效
检测是否生效，比反复调参更重要
写了 contain: layout paint 却没效果？先打开 DevTools 的 Computed 面板，确认两件事：contain 值确实解析为 layout paint，且 height 或 min-height 的 computed 值不是 0px。浏览器对尺寸缺失极其严格——哪怕你写了 contain: strict，只要 computed height 是 0，它就在那儿安静地摆烂。
渐进增强写法推荐：
- 基础样式先写稳：
.panel { min-height: 200px; } - 再用
@supports (contain: layout)包裹优化规则，避免老浏览器报错 - 运行时检测可选：
if ('contain' in document.documentElement.style)
最容易被忽略的是：contain 不是“开了就快”，而是“边界定了才起效”。没有尺寸锚点，所有隔离都是空谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
