Grid 容器的直接子项上设置 float 无效，这是 CSS 规范定义的行为而非兼容性问题；正确做法是用 wrapper 隔离浮动、用 @supports 按容器层级降级、并通过触发 BFC 防止外部浮动污染。
Grid 布局在绝大多数现代项目中已经可以完全取代 float，但“能否取代”不取决于 Grid 本身是否强大，而取决于你是否还在同一个容器里混用两者、是否还为旧浏览器写冗余 fallback、以及是否理解 float 在 Grid 上下文里根本不会生效。
Grid 子项上写 float 是无效操作
这不是兼容性问题，而是 CSS 规范明确定义的行为：当一个元素是 Grid 容器的直接子项时，float、clear、vertical-align 等属性全部被忽略。浏览器会照常解析，但计算布局时直接跳过。
- 你在 DevTools 的 Computed 样式里看到
float: left和grid-row: 1同时存在？说明逻辑冲突已发生，不是“没生效”，而是“不该存在” - 常见翻车点：第三方富文本组件输出带
float的图片，你把它直接塞进 Grid 容器 —— 图片位置错乱，不是 Grid 不兼容，是你没隔离作用域 - 正确做法：用 wrapper 包一层，让该 wrapper 成为 Grid 子项，内部再用
float或shape-outside做图文环绕
@supports (display: grid) 是唯一靠谱的降级路径
不要试图用 float + grid 混合写一套“双布局”，也不要用 overflow: hidden 或 clearfix 去“修复” Grid 容器——它本身就不需要清除。
- 降级只发生在容器层级：
.layout { display: block; } @supports (display: grid) { .layout { display: grid; } } - 避免写
@supports not (display: grid)，部分老浏览器（如 Safari 9）会误判支持而崩溃 - IE10/11 虽支持 -ms-grid，但语法不兼容、gap 不可用、auto-fit 失效，实际维护成本远高于写两套样式，2026 年起建议直接放弃
真正要兼容的不是 Grid，而是外部浮动污染
Grid 容器自己很干净，但它可能被父级或兄弟级的 float 挤压变形——这是最常被忽略的兼容盲区。
- 如果 Grid 容器上方有
float: left的广告位，且没加clear: both，Grid 容器会从浮动元素右侧开始渲染，造成视觉偏移 - 解决方案不是给 Grid 加
clear（它无效），而是确保其父级触发 BFC：display: flow-root或overflow: hidden（注意裁剪风险） - CMS 或编辑器插入的内容常自带
float，建议在 Grid 区域前统一加.content-start { clear: both; }类做兜底
Grid 替代 float 的难点不在语法迁移，而在放弃“必须清浮动”的思维惯性——当你不再把某个区域默认当成浮动上下文来设计，兼容问题就自然消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
