Grid布局中clear、float、overflow清除代码全部失效，应彻底删除；用grid-template-columns替代float+width；第三方浮动内容需隔离作用域；子项float无效，DOM顺序与视觉顺序可分离。
直接删掉所有 clear 和 overflow 清除代码
一旦父容器设为 display: grid，clear、float、overflow: hidden、::after 伪元素清除等全部失效——不是“没生效”，是规范明确跳过计算。保留它们只会干扰网格轨道生成，甚至裁剪 position: absolute 子项。
实操建议：
- 删除父容器上所有 float、clear、overflow、display: flow-root 声明
- 删除子元素上的 float、clear、以及靠 margin-right: -9999px 模拟间隙的 hack
- 若原布局依赖 overflow: hidden 防塌陷，现在它既不必要也不起作用，直接删
用 grid-template-columns 替代 float + width 组合
浮动布局常靠 float: left + width 拼宽度，Grid 则用轨道定义分配空间，逻辑完全不同。
常见错误现象：
- 把 .sidebar { float: left; width: 200px; } 直接改成 grid-column: 1，结果列宽失控
- 保留 width: 200px 在子项上，导致网格轨道被撑破
实操建议：
- 父容器写 grid-template-columns: 200px 1fr，显式扣掉固定尺寸，剩余给自适应列
- 若需响应式三栏均分，用 grid-template-columns: repeat(3, 1fr)，别写 width: 33.33%
- 原来靠 margin-left: auto 居右的按钮，在 Grid 中仍可用，但前提是该子项未被 grid-column 锁定位置
处理 CMS 或编辑器注入的浮动内容
第三方富文本组件（如 TinyMCE、CKEditor）输出的图片常带 float: right，若直接塞进 Grid 容器，视觉错乱不是 Grid 不兼容，是你没隔离作用域。
实操建议：
- 用 wrapper 包一层：让 wrapper 成为 Grid 子项，内部再用 float 实现图文环绕
- 在 Grid 区域前统一加 .content-start { clear: both; } 类兜底，防上方浮动广告位挤压
- 确保 Grid 容器父级触发 BFC，例如 display: flow-root 或 overflow: hidden（注意裁剪风险）
- 不要给 Grid 容器本身加 clear，它对浮动无效
别在 Grid 子项上写 float
float 在 Grid 容器的直接子项上是规范级无效操作，DevTools 里看到 float: left 和 grid-row: 1 并存，说明你已经混用了冲突逻辑——不是浏览器 bug，是你该删代码了。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的点：
- HTML 中仍按浮动顺序写 DOM（左栏必须在右栏前），其实 grid-column: 2 可任意调整视觉位置
- 注释里还留着 // 清除浮动防止塌陷，这种描述已无意义，建议直接删
- JS 中监听 resize 后手动重算高度或插入 clear 元素的逻辑，也得一并移除——Grid 自动处理高度
真正麻烦的从来不是写新 Grid 代码，而是确认旧项目里还有多少地方默认“浮动还在起作用”。
