Grid 与 float 不能混用实现自适应分栏，因 Grid 是二维轨道模型，float 是为文字环绕设计的过时机制；在 Grid 容器中设置 float 无效，子项仍按网格轨道布局，视觉无变化且属冗余。
float 和 CSS Grid（栅格系统）**不能混用实现“自适应分栏”**——这不是技术选型问题，而是机制冲突：Grid 是基于二维轨道的现代布局模型，而 float 是为文字环绕图片设计的、早已被弃用的文档流干扰手段。一旦在 Grid 容器内对子项使用 float，它会直接失效。
Grid 子项设置 float: left 或 float: right 后，display 会被强制重置为 block，但 **不会脱离 Grid 轨道**，也不会影响其他网格项的位置；它既不触发 BFC，也不改变 grid-area 分配，视觉上几乎无变化，纯属冗余甚至埋雷。
为什么 grid + float 看似“能用”其实是错觉
你可能在调试时看到元素没塌陷、也没错位，就以为 float “起作用了”。其实只是：
-
float被 Grid 布局引擎忽略，子项仍严格按grid-template-columns分配空间 - 若父容器恰好是
display: grid，子项的float根本不参与定位计算 —— 浏览器规范明确要求：浮动在 Grid/ Flex 容器中不产生布局效果 - DevTools 中看到的“浮动图标”只是样式面板的静态标记，不代表实际渲染行为
真正该用的替代方案（按推荐顺序）
要实现“自适应分栏”，直接用 Grid 自身能力即可，无需绕路：
-
左栏定宽、右栏自适应：
grid-template-columns: 200px 1fr;（1fr表示剩余可用空间） -
左右定宽、中间自适应：
grid-template-columns: 200px 1fr 200px; -
响应式断点切换：配合
@media改写grid-template-columns，例如小屏下改为1fr单列 -
内容驱动宽度：用
minmax(200px, 1fr)保证最小宽度，又允许弹性伸缩
容易被忽略的兼容性与陷阱
如果你的项目仍需支持 IE11（已停止支持），注意：
立即学习“前端免费学习笔记（深入）”；
- IE11 的
display: grid是旧版实现（2011 年草案），不支持fr单位、gap、subgrid，且grid-template-areas解析不稳定 - 此时不要退回去用
float—— 应改用display: -ms-grid配合-ms-grid-columns，或降级为 Flex - 任何试图在 Grid 容器里塞
float+clear的 hack，都会在 Safari 15.4+、Chrome 108+ 中出现不可预测的盒模型偏移
真正需要“浮动语义”的场景极少，比如遗留 CMS 输出的 HTML 无法改结构，又必须兼容 IE8 —— 那就别用 Grid，老实用 float + BFC 方案。一旦选了 Grid，就彻底告别 float。
