浮动布局导致父容器高度塌陷、右侧栏换行、背景色失效等，根源是元素脱离文档流；Grid仅需三行代码（display: grid、grid-template-columns、grid-column）即可替代，无需清除浮动且支持响应式与垂直居中。
浮动布局的典型问题：清除浮动和文档流丢失
用 float 做多列布局时，父容器高度塌陷是高频痛点。你得手动加 clearfix 类、插入空 <div> 或用 <code>overflow: hidden 强制触发 BFC —— 这些都不是布局逻辑本身，而是补救措施。
常见错误现象包括：右侧栏突然掉到下一行、背景色只盖住第一行内容、响应式断点里列宽计算错乱。根本原因是 float 把元素“抽离”了文档流，后续元素无法感知其占位。
- 浮动依赖 HTML 顺序（左栏必须写在右栏前面才能左对齐）
- 列宽需手动算百分比，且要预留
box-sizing和padding的误差 - 没有原生的垂直居中能力，得靠
line-height、transform或额外 wrapper
Grid 替代方案：三行代码撑起整个主区域
把浮动布局换成 Grid，核心就是替换容器的 display 值，并用 grid-template-columns 定义轨道。不需要改 HTML 结构，也不需要清除浮动。
假设原浮动布局是「左侧 200px 导航 + 右侧自适应内容」：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
如果还要加页脚跨两列，直接加一行：
.footer {
grid-column: 1 / -1;
}
-
1fr比100%更可靠：它自动扣除固定列宽后的剩余空间，不因padding或border错位 - 子元素无需
float、clear、position等干扰样式 - 列顺序可由
grid-column控制，HTML 顺序不再影响视觉位置
响应式切换：Media Query + Grid 轨道重定义
浮动布局做响应式常要写多套 float + width 组合；Grid 只需在断点里改 grid-template-columns。
例如移动端堆叠为单列：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
更进一步，用 repeat() 和 minmax() 实现等宽自适应卡片流：
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))));
}
- 浮动方案需 JS 计算列数或依赖第三方库（如 Masonry）来处理不等高问题
- Grid 的
auto-fit+minmax()是纯 CSS 流式栅格，无 JS 依赖 - 注意：IE11 对
repeat(auto-fit)支持不全，需降级为固定列数或用display: -ms-grid
代码量对比与迁移成本
一个含 header、aside、main、footer 的经典四区布局，浮动实现通常要 40–60 行 CSS（含 clearfix、hack、多断点 width/float 组合）；Grid 版本核心样式约 15 行以内，且可复用同一套轨道定义。
但别忽略真实项目里的隐性成本：
- 旧项目中浮动可能和 JS 插件（如轮播图、拖拽排序）耦合，直接换 Grid 前先确认插件是否依赖
offsetLeft或getBoundingClientRect()计算 - Grid 的
gap属性不能作用于display: contents子元素，若原有结构用了该属性，需改用 wrapper 或调整层级 - 调试时别依赖浏览器“Computed”面板看
float效果——Grid 布局的网格线在“Layout”面板里才看得清
真正难的不是写 Grid 语法，而是识别哪些浮动逻辑其实是语义错位：比如把导航栏写成 float: left 却没用 <nav></nav> 标签，这种时候重构 HTML 比硬套 Grid 更治本。
