Grid是复杂布局的唯一合理选择，因Float无行概念、不感知列约束、子项脱离文档流导致塌陷与换行错乱，所有可用效果均依赖hack补丁；Grid通过声明式二维坐标系、auto-fit、gap等实现语义化、响应式、可维护布局。
Grid 不是“比 Float 更高效”，而是 Float 在复杂布局中根本无法正确建模——它没有行概念、不感知列约束、子项脱离文档流，所有可用效果都靠 hack 补丁硬撑；Grid 用声明式二维坐标系直接表达意图，省掉的不是几行代码，而是整个补丁链。
Float 必须手动清除，Grid 天然自包含
浮动元素脱离文档流，父容器高度塌陷是必然结果，不是 bug 是模型缺陷。你看到背景色消失、footer 上浮、border 截断，不是漏写样式，是父容器真没高度可撑。
-
overflow: hidden能撑高，但会意外裁剪position: absolute的下拉菜单或 tooltip -
::after { clear: both }需额外伪元素，若父容器有max-height，可能触发非预期滚动条 -
display: flow-root是标准兜底方案，但它只该用于迁移老代码——新布局不该以“需要清浮动”为前提设计
而 Grid 容器默认包裹所有子项：display: grid 本身就是一个独立布局上下文，grid-template-columns 和 gap 直接定义空间分配逻辑，不存在“清除”这个动作。
Float 响应式换行不可控，Grid 自动适配列数
Float 不响应空间变化：元素不会自动重排，而是“撞墙掉行”。这种掉行位置在 iOS Safari 和安卓 WebView 中解析偏差明显，同一段代码在不同设备上换行点可能不同。
立即学习“前端免费学习笔记（深入）”；
- 子项写
float: left+width: 33.33%，小屏下因margin或border导致换行错乱，且无法自动回流 - 媒体查询里反复覆盖
float和width，维护成本指数级上升 -
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))一行解决自适应列数，无需手动计算像素或百分比误差
Float 强制 HTML 结构服从视觉顺序，Grid 完全解耦
浮动要求左栏必须写在右栏前面，否则 float: left 就会错乱。这种“结构服从表现”的耦合，在大型项目中直接导致模板难复用、CMS 插入受限、组件抽取困难。
- Grid 中页脚可以写在 DOM 最前面，靠
grid-row: 3仍稳稳落在底部 - 侧边栏和主内容谁先写都不影响视觉顺序，重构时只需改 CSS，不用碰 HTML
- 嵌套 Grid 容器之间互不影响，不像浮动那样层层触发 BFC，也不用担心
justify-content被干扰
真正容易被忽略的是：你在 Grid 容器里写 float: left，浏览器会静默忽略——不是兼容性问题，是规范层面废弃。它根本不参与网格轨道计算。如果你还在想“怎么清浮动”，说明已经混用了两种互斥模型。
