Grid容器中float被规范静默忽略，必须清理overflow:hidden、float:left等残留并重写布局逻辑，否则DOM顺序、JS高度计算和伪元素清除仍会干扰视觉与行为。
不能“直接替换”，必须清理浮动残留并重写布局逻辑——否则 Grid 会忽略 float、clear 等声明，但旧代码里的 DOM 顺序、JS 高度计算、伪元素清除等仍会悄悄干扰视觉和行为。
为什么 display: grid 后 float 样式还在 DevTools 里显示？
浏览器确实会保留 float 声明的文本，但它在 Grid 容器中被规范要求“静默忽略”：不参与轨道分配、不触发 BFC、不影响 grid-column 定位。你看到的只是样式未删干净的表象，不是功能还有效。
常见错误现象包括：
- 子元素写了
float: left又写了grid-column: 2，结果位置由后者决定，前者纯属冗余 - 父容器仍带
overflow: hidden，可能意外裁剪position: absolute的下拉菜单 - JS 里还调用
element.offsetHeight依赖浮动后高度，实际值已变小（Grid 不塌陷）
必须删除的三类浮动残留代码
重构不是加新样式，而是做减法。以下代码只要存在，就说明迁移没完成：
- 父容器上的
overflow: hidden、display: flow-root、clear: both—— Grid 容器天然具备 BFC，这些全是为 float 补救而设 - 子元素上的
float: left/right、clear: both、margin-right: -9999px（用于负边距模拟间隙） - HTML 中为 float 顺序妥协的 DOM 结构，比如侧边栏必须写在主内容前面；Grid 中可用
grid-column: 1或grid-area任意调整视觉位置
grid-template-columns 怎么对应老式 float 的百分比宽度？
别用 20% 60% 20% 这种写法——Grid 中百分比不相对于容器宽，而是相对于网格轨道本身，语义错乱且响应脆弱。
正确映射方式：
- 等宽三栏 →
grid-template-columns: repeat(3, 1fr) - 左栏 200px + 主内容自适应 →
grid-template-columns: 200px 1fr（1fr自动填满剩余空间，不受padding影响） - 主内容占 60% + 两侧各 20% →
grid-template-columns: 0.2fr 0.6fr 0.2fr（注意是fr单位，不是百分比）
响应式只需在 @media 里改这一行，不用重复写整套 float + width 组合。
图文环绕这类 float “刚需”怎么处理？
Grid 本身不支持文字自动绕排图片，强行在 grid item 上用 float 是唯一可行的局部方案，但必须满足两个前提：
- 浮动只发生在某个 grid 区域内部（例如
.article-content这个 grid item），不作用于 grid container 直接子项 - 该区域需单独清除浮动，推荐
overflow: hidden或::after { clear: both }，否则文字可能溢出或高度塌陷
真要替代图文环绕，shape-outside 才是正解，但兼容性差（Chrome/Firefox 支持，Safari 有限），生产环境慎用。
最容易被忽略的不是怎么写 Grid，而是旧代码里有多少地方隐式依赖“浮动还在起作用”——比如 CMS 富文本插入的 clear: both 控制间距。这些都得逐个识别、隔离、替换，而不是指望加一行 display: grid 就万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
