清除浮动代码必须全部删除，因为display: grid会完全忽略float和clear声明；应删尽所有浮动相关声明及hack，改用grid-template-columns和gap重构布局。
grid-template-columns + gap 重定义结构——不是“加一层 Grid”，而是彻底替换浮动上下文。
为什么清除浮动代码必须全部删除
一旦父容器设了 display: grid，浏览器规范明确要求忽略子元素上的 float 和 clear 声明。这意味着：
-
clear: both在 Grid 容器内不触发任何布局行为 -
::after { clear: both }、overflow: hidden、display: flow-root这些 hack 不仅无效，还可能干扰网格轨道计算（比如意外裁剪position: absolute子项） - 所有为“容纳浮动”写的注释（如
// 清除浮动防止塌陷）建议一并删掉，避免误导
如何把 float 的列宽映射到 grid-template-columns
别硬套百分比。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 结构要不要改顺序
不用改 DOM 顺序，但要意识到它已失去布局意义。Grid 允许你用 grid-column 或 grid-template-areas 随意调整视觉位置，不必再让左栏写在右栏前面来迁就 float: left。
- 原结构：
<div class="sidebar"></div> <div class="main"></div>（为 float 左对齐妥协） - Grid 下可保持原样，或按语义重排；视觉由
.sidebar { grid-column: 1; }和.main { grid-column: 2; }控制 - 若 SEO 或可访问性敏感，推荐用
grid-template-areas显式声明区域名，同时保持 HTML 中<main></main>在前
JS 中依赖 offsetHeight 的逻辑大概率失效
旧代码里若有监听 resize 后手动重算高度、插入 clear 元素、或基于浮动后 DOM 位置做定位的逻辑，Grid 下会静默失效。
- Grid 自动处理容器高度，不再需要“撑开父容器”这类操作
- 如果 JS 里有
el.offsetHeight判断浮动是否换行、或根据getBoundingClientRect()动态插入清除节点，必须重写 - 第三方富文本组件输出带
float的图片？不要直接塞进 Grid 容器，应包一层 wrapper，让它成为 Grid 子项，内部再用float或shape-outside
float。重构前先全局搜索 float、clear、overflow: hidden、clearfix，逐个评估是否残留。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
