grid布局仅作用于直系子元素，浮动元素脱离文档流导致Grid失效；需清除所有Float声明、删除冗余clear和margin、将Grid应用到实际列容器，并统一box-sizing。
浮动元素还在 dom 里，Grid 容器就无法控制它
Grid 布局只对直接子元素生效，而 float 会把元素从文档流中“抽离”，导致 Grid 的 grid-template-areas 或 grid-column 完全失效——哪怕该元素在 html 中是 Grid 容器的子级。常见现象是：其他子项按 Grid 排列，唯独一个“飘”在左上角或顶部空白处，控制台也无报错。
必须先清除浮动影响，再让元素回归 Grid 流。不是加 clear: both 就能解决，那只是视觉遮盖，不改变脱离流的本质。
- 检查目标元素是否仍带
float: left/float: right，包括通过类名（如.left、.pull-right）间接设置的 - 移除所有
float声明，同时删掉配套的clear和margin补偿逻辑（比如为绕过浮动而加的负边距） - 若该元素原本靠浮动实现“文字环绕图片”，改用
shape-outside+float仅保留在图文混排场景（且需确认父容器未设 Grid）
旧浮动结构嵌套太深，不能只改最外层容器
常见错误是把 display: grid 加在顶层 wrapper 上，但内部还有一层 .row + 多个 .col，而这些 .col 仍在用 float: left。结果 Grid 只作用于 .row，.row 自己却靠浮动撑开，整个布局依然不可控。
替换必须下沉到实际参与排列的最小容器层级。通常就是过去写 float: left; width: 33.333% 的那些元素。
立即学习“前端免费学习笔记（深入）”；
- 定位到真正承担“列”功能的元素（常为
div.col或section.card），确保它们是 Grid 容器的**直系子元素** - 如果中间有
.row这类仅作 clearfix 用的包裹层，可直接删除，或将其设为display: contents（兼容性需查display: contents在目标浏览器的支持情况） - 原浮动依赖的百分比宽度（如
width: 25%）全部删掉，改用 Grid 的grid-template-columns: repeat(4, 1fr)等声明
Grid 替换后文字换行/对齐异常，其实是盒模型残留
浮动布局时代常用 box-sizing: border-box 配合 padding 模拟内边距，但部分旧 css 会漏写 box-sizing，导致 Grid 下元素尺寸计算突变——尤其当 padding 或 border 存在时，1fr 分配的空间被压缩，内容溢出或错位。
这不是 Grid 问题，是盒模型不一致暴露的老债。
- 全局重置：在 Grid 容器及子项上显式加
box-sizing: border-box（即使已全局设置，也建议在组件级再申明） - 检查是否有
vertical-align: top/middle遗留规则——Grid 子项默认align-self: stretch，vertical-align无效，但可能干扰行内布局逻辑 - 原靠
line-height+height居中的方案，在 Grid 中应改用display: flex; align-items: center; justify-content: center或place-items: center
IE11 兼容需求下，不能直接弃用 float
如果必须支持 IE11，而项目又已用 Grid 实现主结构，要注意：IE11 的 Grid 实现（-ms-前缀版）不支持 grid-template-areas、gap、subgrid，且对 fr 单位解析不稳定。此时强行全量替换浮动，反而导致布局坍塌。
渐进增强比一步到位更可靠。
- 用
@supports (display: grid)包裹现代 Grid 规则，IE11 自动跳过 - 在
@supports外保留浮动布局代码，作为降级方案（注意：浮动代码必须放在 Grid 之后，否则会被覆盖） - 避免混用：不要在一个容器内既写
float又写grid-column，CSS 解析器会按规范忽略后者，但开发者容易误判优先级
最麻烦的不是语法转换，而是浮动时代积累的“视觉 hack”——比如为了撑开父容器加的伪元素、为了对齐硬调的 margin-top: -2px。这些不会报错，但会让 Grid 下的渲染结果难以预测。逐个组件验证，比通篇搜索替换更重要。