容器查询不终结float，但display:flow-root+container-type组合使其失去存在理由；float因脱离文档流导致父容器尺寸不可测，故在@container中失效；图文环绕是float唯一不可替代的语义场景。
容器查询本身不终结 float，但让 float 失去存在理由
容器查询（@container）不是 float 的“替代者”，它甚至不和 float 直接竞争。真正终结 float 使用场景的，是 display: flow-root + container-type 这套组合——它解决了 float 最顽固的问题：父容器高度塌陷 + 尺寸不可测，而这两点恰恰是容器查询生效的前提。
float 在容器查询中完全失效，不是 bug 是规范
当你给一个浮动元素（float: left）的父容器写 @container (min-width: 300px)，结果样式从不触发，别怀疑浏览器——这是预期行为。因为：
- 浮动元素脱离文档流，父容器的
inline-size和block-size计算值常为0或远小于视觉尺寸 -
@container只响应可测量、可计算的容器尺寸变化，而浮动上下文不参与该计算 - DevTools 里看到容器尺寸是
0×0？说明它根本没被当成有效容器
用 flow-root 替代 clearfix，才能让容器查询真正工作
别再用 overflow: hidden 或伪元素清除浮动来“凑合”支撑容器查询。正确路径是：
- 把浮动子项包进一个新 wrapper，并给 wrapper 设
display: flow-root - 同时声明
container-type: inline-size（必须）和container-name: card（推荐） - 浮动子项自身保留
float: left没问题，只要它不直接挂在容器上 - 注意：wrapper 不能同时设
display: flex或display: grid，否则flow-root被覆盖
图文环绕仍是 float 唯一不可替代的语义场景
如果你在新闻正文里需要一张图片左浮动、文字自动绕排，float 依然是最准确、最轻量、最符合 HTML 语义的选择。Flexbox 和 Grid 都无法原生模拟这种流式文本包裹行为——它们是布局容器，不是文本流控制器。
立即学习“前端免费学习笔记（深入）”；
这时候，你得接受：float 不是“过时”，而是“归位”。它不该用来做导航栏、卡片网格或响应式栅格，只该留在 <figure> 里安分地绕字。一旦混用场景，比如把带 float 的 CMS 内容直接塞进 display: grid 容器，错乱就不是兼容性问题，是逻辑冲突。
