清除浮动代码必须全部删除，因为display: grid会完全忽略float和clear声明，保留overflow:hidden等hack不仅无效，还可能干扰网格计算；应改用grid-template-columns和gap重构布局。
直接把 float 换成 display: grid 不行，必须删掉所有浮动相关声明、清除逻辑和 margin hack，再用 grid-template-columns + gap 重定义结构。
为什么清除浮动代码必须全部删除
一旦父容器设了 display: grid，浏览器规范明确要求忽略子元素上的 float 和 clear 声明——它们彻底失效。保留 ::after { clear: both }、overflow: hidden 或 display: flow-root 不仅没用，还可能干扰网格轨道计算，比如裁剪 position: absolute 子项。
-
clear: both在 grid 容器内不触发任何布局行为 -
overflow: hidden可能意外隐藏定位元素或滚动区域 - 所有为“容纳浮动”写的 hack（包括注释里写的
// 清除浮动防止塌陷）建议一并删掉
grid-template-columns 怎么对应老式 float 的列宽
别硬套百分比。float 里写 width: 20% 是基于父容器宽度算的，而 Grid 中的百分比不作用于容器宽度，1fr 才是等分剩余空间的可靠单位。
- 三栏等宽 →
grid-template-columns: repeat(3, 1fr) - 左栏 200px + 主内容自适应 →
grid-template-columns: 200px 1fr - 主内容 60% + 两侧各 20% →
grid-template-columns: 0.2fr 0.6fr 0.2fr（不是20% 60% 20%） - 响应式三列卡片 →
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))
浮动顺序依赖的 HTML 结构要不要改
不用改 HTML 顺序，但要意识到它已失去布局意义。Grid 允许你用 grid-column 随意调整视觉位置，不必再让左栏 DOM 写在右栏前面来迁就 float: left。
立即学习“前端免费学习笔记（深入）”；
- 原结构：
<div class="sidebar"></div><div class="main"></div>（为 float 左对齐妥协） - Grid 下可保持原样，或按语义重排，视觉由
.sidebar { grid-column: 1; }和.main { grid-column: 2; }控制 - JS 中若存在依赖
offsetHeight计算浮动后高度的逻辑，大概率失效，需重写
图文绕排这种 float “刚需”怎么处理
Grid 本身不支持文字自动绕图，这不是 bug，是设计使然。强行在 grid item 上用 float 无效；真需要绕排，应换思路：
- 局部图文混排（如文章段落中插图）→ 把
img放进普通块级容器，用float: left/right，不用 Grid - 精确图文位置（如图左文右+标题居中）→ 用
grid-template-areas，但文字需手动分段塞进不同区域，无法自动折行绕图 - 真正替代 float 绕排的是
shape-outside，但兼容性弱（Chrome/Firefox 支持尚可，Safari 有限），慎用
最麻烦的从来不是写新 Grid 规则，而是确认旧代码里还有多少地方隐式依赖浮动仍在起作用——比如 JS 插入的清除元素、CSS 中为 float 保留的 margin 负值、甚至开发文档里写的“此模块依赖左浮动顺序”。这些残留点不清理干净，重构就只是表面替换。
