float在Grid容器中被规范明确忽略，因Grid创建独立布局上下文并接管子元素定位权；替代方案为justify-self、justify-items等Grid对齐属性，或改用Flex/Block布局。
float在Grid容器里为什么不起作用
CSS Grid布局中，子元素上写的 float 会被完全忽略——不是“没效果”，而是规范明确要求浏览器必须无视它。这是W3C标准行为，不是bug，也不是兼容性问题。
原因很简单：Grid是独立的布局上下文，它接管了子元素的定位权。一旦父元素设了 display: grid，子元素就进入Grid Flow，float 这套老机制直接被绕过，连触发BFC的机会都没有。
- 即使同时写了
float: left和grid-column: 1，最终只认Grid定位 -
clear同样失效，因为浮动元素根本没参与文档流排布 - 旧代码里靠
float实现的“文字环绕图片”在Grid子项中无法复现
想让Grid里的元素“靠左/右”该用什么替代float
用Grid自身的对齐属性，而不是试图复活float。关键是分清场景：是控制单个子项位置，还是整体轨道分布。
- 单个子项水平对齐：用
justify-self: start | end（对应左/右） - 整行子项对齐方式：用容器级
justify-items: start | end | center - 需要“文字环绕”效果：Grid本身不支持，得换思路——把图文拆成不同Grid区域，或退回Flex/inline-block
- 注意
justify-self只对网格项生效，且不能和place-self冲突（后者会覆盖前者）
从浮动布局迁移到Grid时最容易漏掉的三件事
很多团队在改旧项目时，只改了父容器的 display，却忘了清理子元素残留的浮动声明，结果调试半天发现样式“不生效”，其实是被静默丢弃了。
立即学习“前端免费学习笔记（深入）”；
- 批量删掉所有子元素上的
float、clear、margin（尤其是为清除浮动加的负边距） - 检查是否误把Grid容器设成了
display: inline-grid——它会让容器表现像内联元素，可能引发意外换行 - 旧代码常用
width: 50%+float做两栏，Grid里应改用grid-template-columns: 1fr 1fr，别留着百分比宽度干扰轨道计算
如果非要保留float逻辑，只能放弃Grid容器
没有“让float在Grid里生效”的hack。强行要浮动，说明当前结构其实不适合Grid——比如需要动态内容流、复杂图文混排、或依赖JavaScript读取offsetLeft等浮动后位置。
- 可降级用
display: flex：支持flex-wrap和align-items，又不废掉float（虽然也不推荐） - 更稳妥的是用
display: block+ 清除浮动，或改用CSS Containment（contain: layout）隔离影响范围 - 真遇到“Grid必须用，但某块内容还得浮动”的极端情况，只能用
position: absolute手动定位，代价是脱离Grid流，响应式需额外处理
Grid和float属于两套互斥的布局范式，硬凑在一起只会增加维护成本。迁移时最省事的做法，是把“浮动逻辑”彻底翻译成Grid术语，而不是带着旧思维去填坑。
