grid容器中float和clear声明被规范强制忽略，删除所有清浮代码；图文绕排需用float或shape-outside，不可在grid item上使用float。
清除浮动代码必须全部删掉
只要父容器加了 display: grid，所有子元素上的 float、clear 声明都会被浏览器忽略——这不是兼容性问题，是规范强制行为。保留 ::after { clear: both }、overflow: hidden 或 display: flow-root 这类“清浮 hack”，不仅没用，还可能干扰网格轨道计算：比如意外裁剪 position: absolute 子项，或让 gap 表现异常。
常见错误现象：
- 页面局部内容突然被截断或消失
- 网格项高度不一致，尤其当某列内容特别长时
- 响应式断点失效，
@media里改了grid-template-columns却没反应
实操建议：
- 全局搜索项目中所有
float:、clear:、.clearfix、overflow: hidden（用于清浮场景）并删除 - 把注释里写的
// 清除浮动防止塌陷也一并删掉，它已失去意义 - 如果某个 grid item 内部仍有图文绕排需求，那 float 可以保留在该 item 的子元素上（如
.text-area img { float: right; }），但仅限这一层
grid-template-columns 别套 float 的百分比
float 里写 width: 20% 是按父容器宽度算的；Grid 中的百分比单位不作用于容器宽度，而是相对于网格轨道本身的尺寸——直接照搬会错乱。
正确映射方式：
- 三栏等宽 →
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)))
性能影响：用 fr 单位比百分比更稳定，浏览器无需反复回流计算；auto-fit 配合 minmax() 能避免空列，比媒体查询手动切列更轻量。
HTML 结构不用重排，但 JS 逻辑大概率要改
Grid 不依赖 DOM 顺序来决定视觉位置，所以你完全可保留原来的 <div class="sidebar"></div>
<div class="main"></div>，再用 .sidebar { grid-column: 1; } 和 .main { grid-column: 2; } 控制落点。
但要注意：JS 中若存在以下逻辑，基本会失效：
- 用
offsetHeight或getBoundingClientRect()计算浮动后容器高度 - 监听
resize后手动调整子元素margin-left模拟 float 排列 - 基于
float状态做条件判断（如if (el.style.float === 'left')）
这类代码得重写为基于网格轨道或 gridArea 的判断，或者干脆移除——Grid 天然撑高、自动对齐，很多“补丁式” JS 就没必要了。
图文绕排不能靠 grid item 上的 float
Grid 容器内对子元素设 float 无效，这是设计使然，不是 bug。真需要文字绕图，得换思路：
- 局部混排（如文章段落中插图）→ 把
<img>放进普通块级容器，用float: left/right，别把它塞进 grid item 里 - 精确图文布局（如图左文右+标题居中）→ 用
grid-template-areas切分区域，但文字需手动分段填入不同区域，无法自动折行绕图 - 想真正实现自动绕图 → 用
shape-outside，但注意兼容性：Chrome/Firefox 支持尚可，Safari 仍有限制（截至 2026 年 9 月）
最容易被忽略的一点：很多人以为 “Grid 替代 float” 是全场景替代，其实图文绕排仍是 float 的专属领地。强行在 grid item 上加 float 不仅无效，还会让调试变得混乱——先确认这是否真是你需要解决的问题，再选工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
