grid容器内float声明被浏览器静默丢弃是css规范强制行为，非bug或兼容性问题；错位主因是列宽失配、gap与padding叠加超限、minmax下限过小或内容高度差异，应改用align-items、aspect-ratio等原生方案。
Grid容器里float声明被浏览器静默丢弃是规范行为，不是bug
只要父元素设了display: grid，它的直接子元素上写的float: left、float: right或clear: both全部无效。这不是兼容性问题，也不是浏览器差异，而是CSS规范强制要求：Grid布局上下文与浮动机制互斥。你在DevTools的Computed面板里看到float带删除线，就说明它已被跳过计算。
为什么还总有人以为float“没修好”？
常见错觉来源有三个：
- 第三方富文本组件输出的HTML自带
float，你直接塞进Grid容器，结果图片位置乱了——其实错位根源在那个img标签自身脱离了文档流，而不是Grid“不支持” - 写了
float又加clear: both，发现没用——因为clear只对前一个浮动兄弟生效，而Grid子项根本不算“浮动兄弟” - 在Grid容器外层还有
float: left的广告位，导致整个Grid区域偏移——这问题不在Grid内部，而在父级文档流被干扰
该用什么替代float实现图文环绕或侧边栏？
Grid原生能力足够覆盖绝大多数过去靠float完成的场景：
- 图文环绕不用
float: left+margin-right，改用shape-outside配合clip-path（注意需包裹在非Grid子项的wrapper中） - 侧边栏布局别写
float: left+margin-left，直接用grid-template-columns: 200px 1fr+grid-column控制位置 - 卡片列表换行错位，不是因为“float没清干净”，而是
minmax(280px, 1fr)下某张卡片内容太短导致高度塌缩——加align-items: start或统一aspect-ratio更治本
调试时最该检查的三处地方
当Grid里出现“疑似float残留”的错位，优先查这些，而不是调float：
-
grid-template-columns列宽是否和内容实际尺寸失配（比如设了minmax(300px, 1fr)但某项只有50px高） - 媒体查询中
gap是否在小屏下没重设，导致总宽度超限掉行 - 父容器是否被兄弟级的
float挤压（此时应给Grid容器父级加display: flow-root，而非动Grid本身）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
