容器查询生效需容器参与正常布局流，禁用 position: absolute/fixed；须设 container-type、contain: size 且尺寸可测，内联元素需转块级，flex 子项需额外 wrapper 并设 min-width: 0。
容器查询和定位不能混用实现“自适应”——定位解决的是位置锚定，容器查询解决的是尺寸响应，强行结合反而破坏容器查询的生效前提。
container-type 失效常因 position: absolute 或 fixed
给父容器加 position: absolute 后再设 container-type: inline-size，浏览器会直接忽略该属性。因为绝对定位元素脱离文档流，无法提供稳定可测的 inline-size 上下文。
- 常见错误：
.card-wrapper { position: absolute; container-type: inline-size; }→ 查询静默失效 - 正确做法：容器必须参与正常布局流，优先用
display: block、flex或grid，并确保有明确宽度约束（如width、max-width、flex-basis） - 若真需定位子元素（比如卡片右上角 badge），应在容器查询生效后，在
@container规则内单独控制 badge 的position: absolute，而非把容器本身设为 absolute
@container 规则里可以安全使用 position 属性
容器查询命中后，你完全可以在其作用域内用 position: absolute 调整子元素位置，只要不破坏容器自身的尺寸稳定性。
- 例如：在宽容器中让标题右对齐，窄容器中恢复默认流式布局：
@container (min-width: 480px) { .card-title { position: absolute; right: 1rem; top: 1rem; } } - 注意：此时
.card-title的包含块仍是.card-wrapper（前提是它没被设成display: contents或position: absolute） - 如果容器本身用了
position: relative，那是推荐的——它既不干扰尺寸测量，又为内部 absolute 提供锚点
flex/grid 子项上设容器需额外 wrapper
直接在 display: flex 的直接子元素（如 .card）上写 container-type，浏览器会无视。Flex 子项的尺寸由父容器算法分配，不是静态可查的“容器尺寸”。
立即学习“前端免费学习笔记（深入）”；
- 典型结构错误：
.flex-container { display: flex; } .flex-container > .card { container-type: inline-size; } /* ❌ 无效 */ - 修复方式：加一层
div.card-wrapper，并确保它有稳定尺寸：.card-wrapper { container-type: inline-size; min-width: 0; /* 关键！防止 flex 子项最小宽度干扰 */ width: 100%; } - 更稳妥可加
contain: layout style size，隔离子内容对尺寸计算的干扰
真正难的不是写 @container，而是让容器“可测”
写了 @container (min-width: 400px) 却没反应？90% 是容器宽度根本测不出来。这不是语法问题，而是布局上下文没立住。
- 检查容器是否满足三个硬条件：有
container-type、有contain: size（或contain: layout style size）、且自身尺寸能被浏览器在布局阶段确定 - 内联元素（如
span）必须先加display: block或flow-root，否则无盒模型，不可测 -
display: contents的父元素永远不能当容器——它不生成盒，container-type直接被丢弃
