grid 布局中无需清除浮动，因为 float 在 display: grid 容器内会被浏览器静默忽略，子项仍参与网格布局、不脱离文档流，clear 和 ::after 清除方案均无效。
Grid 布局里根本不需要清除浮动——不是“怎么清”，而是“清不了，也不用清”。
float 在 display: grid 容器中会被静默忽略
当你给一个 grid 容器的子元素设置 float: left 或 float: right，浏览器不会报错，也不会触发浮动行为：它直接丢弃该声明。这意味着：
- 子项仍参与网格轨道计算，不会脱离文档流
- 父容器高度不会塌陷，
background、border、margin全部正常生效 -
clear属性对它无效，::after清除方案也毫无作用 - 你写的
float只可能在文本环绕场景下残留一点效果（比如图片旁文字绕排），但和布局无关
为什么还在 Grid 里写 float 就会出问题？
问题不在 Grid 本身，而在于你混用了互斥模型。常见踩坑点包括：
- 把
float当作“让元素左对齐”的快捷方式，结果发现justify-content: start更可靠 - 在
grid容器里嵌套了一个未设display: block的 div，又在里面用float，导致内部塌陷——这时要清的是那个内层 div 的浮动，不是 grid 容器 - 用 Safari 14.1 等旧版浏览器测试时，
gap渲染异常，误以为是浮动干扰，其实是grid-gap的兼容性 bug，应改用gap
什么时候你真得手动清浮动？
仅限以下三种真实场景，且都和 Grid 主布局无关：
- 维护 IE9–IE11 的老系统，
display: grid根本不支持，只能靠float+clearfix - CMS 后台富文本编辑器输出的 HTML，自动插入了
float图片，需在卡片组件内局部清除 - 渐进增强策略中，为现代布局写 fallback：比如用
@supports not (display: grid)包裹 float 布局，并配.clearfix::after
真正容易被忽略的是：一旦你声明了 display: grid，就别再把 float 当作布局手段去调试；它不是“没清干净”，而是从语义上就不该存在。那些看似“浮动还在起作用”的现象，大概率是你没关掉开发者工具里的缓存，或者实际生效的是父级或兄弟节点的浮动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
