浮动元素不触发容器查询重计算，因其脱离文档流导致父容器尺寸为0；应改用display: flow-root建立bfc并正确采集尺寸，同时确保设置container-type和container-name。
浮动元素在容器查询中不触发容器尺寸重计算
容器查询（@container）依赖容器的尺寸变化来触发样式响应，但浮动元素（float: left 或 float: right）本身脱离文档流，不会影响父容器的高度或宽度计算——这意味着即使浮动子元素撑开了视觉布局，父容器的 inline-size 和 block-size 仍可能保持初始值（如 0 或内容收缩后尺寸），导致容器查询条件始终不匹配。
- 典型现象：
@container (min-width: 300px) { ... }完全不生效，DevTools 中查看容器尺寸为0×0或远小于预期 - 根本原因：浮动不参与块格式化上下文（BFC）的尺寸贡献，而容器查询要求容器必须建立 BFC 且尺寸可测量
- 解决方向：强制容器形成 BFC 并正确包裹浮动，但仅靠
overflow: hidden不够稳定（尤其在 flex/grid 子项混用时） - 推荐做法：改用
display: flow-root替代老式清除浮动方案；它明确建立 BFC，且不影响容器查询的尺寸采集
用 display: flow-root + 容器查询替代 float 布局
display: flow-root 是目前最干净的浮动替代方案之一，它既解决高度塌陷问题，又确保容器尺寸可被 @container 正确读取。关键在于它不改变子元素的布局模型，只是让父容器“看得见”浮动子项的实际占用空间。
- 不要写：
div { overflow: auto; }—— 在某些滚动容器或 transform 场景下会意外创建新层叠上下文，干扰定位 - 应该写：
div { display: flow-root; container-type: inline-size; } - 浮动子项可保留原样式：
.item { float: left; width: 200px; }，但需注意：若子项总宽超过容器，依然会换行，此时容器查询响应的是换行后的实际宽度 - 性能提示：
flow-root的重排开销极低，比clear: both伪元素更轻量，也比flex强制重构布局更可控
容器查询失效时先检查 container-name 和 container-type 配置
浮动布局常伴随多层嵌套，容易漏掉容器查询必需的两个声明：container-type 和（可选但推荐的）container-name。没有它们，浏览器直接忽略该容器上的所有 @container 规则。
- 错误写法：
<div class="card"></div>+ CSS 中只写了@container (min-width: 400px) { .card { ... } }—— 完全无效 - 正确写法：
<div class="card" style="container-type: inline-size; container-name: card;"></div> - 注意兼容性：
container-name在 Safari 16.4+、Chrome 111+、Firefox 119+ 支持；若需兼容旧版，可省略 name，但必须指定container-type - 调试技巧：在 DevTools 的 Layout 面板中，启用 “Container Queries” 高亮，能直观看到哪些元素被识别为容器、当前匹配的断点
float + 容器查询组合在响应式卡片网格中容易错估列数
用浮动模拟多列卡片（如 float: left; width: calc(50% - 8px)）时，容器查询基于容器宽度判断，但浮动元素的实际排列受父容器内边距、间隙、字体大小等隐式因素影响，导致列数切换时机与预期不符。
立即学习“前端免费学习笔记（深入）”；
- 常见错觉：设了
@container (min-width: 600px) { .card { width: calc(50% - 8px); } }，结果在 598px 宽容器里仍显示两列——因为浮动间隙叠加后总宽已超容器 - 真实原因：
calc()计算不包含浮动间的空白（由换行符/空格产生），而浏览器渲染时会将其计入行内尺寸 - 稳妥做法：改用
display: grid或display: flex配合容器查询；若必须保留浮动逻辑，建议用margin替代间隙，并设置font-size: 0在容器上消除空白节点影响 - 别忘了重置：
font-size: 0会影响子元素，所以卡片内部要显式设回font-size: 1rem
浮动本身不是过时，但在容器查询语境下，它和现代响应式机制存在底层冲突。真正卡住人的，往往不是语法写错，而是以为“只要加了 container-type 就万事大吉”，却没意识到浮动让容器尺寸成了个盲区。
