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