grid容器内float声明被浏览器直接忽略，因css规范禁止对网格项使用float，其直系子元素的float属性不参与布局计算；浮动兄弟元素会干扰grid容器定位，fr单位与百分比混用导致尺寸错乱，清除浮动方案对grid结构无效。
Grid容器内float声明被浏览器直接忽略
只要父元素设了display: grid，它的直系子元素就自动成为网格项（grid item），此时float: left或float: right在规范层面就被禁止生效——不是“没效果”，而是压根不参与布局计算。开发者工具的Computed面板里，float属性会显示为划掉状态，但控制台不会报错，容易误判为样式没加载或优先级问题。
常见现象包括：其他子项按grid-template-columns正常排列，唯独一个带float的元素卡在左上角、尺寸异常、或与其他项重叠。根本原因不是CSS写错了，而是布局机制冲突：Grid是二维坐标系统，float是文档流偏移机制，二者无法共存于同一层级。
浮动兄弟元素会干扰Grid容器定位
如果浮动元素不是Grid容器的子元素，而是它的**兄弟元素**（比如<div class="sidebar"></div>
<div class="grid-main"></div>），那浮动依然有效，但它会脱离文档流，导致后续的Grid容器位置偏移、高度塌陷，甚至与之重叠。
这时候的问题不是Grid本身出错，而是浮动破坏了外层文档流，让Grid容器“找不到正确起点”。典型表现有：
- Grid容器整体向下偏移，顶部留白异常
- Grid容器背景色只覆盖部分区域，下方内容穿透显示
- Grid容器内
justify-content: center失效，内容靠左对齐
fr单位和百分比宽度混用导致尺寸错乱
fr单位基于容器的padding-box尺寸计算，而传统浮动布局依赖的width: 50%是按父容器总宽减去浮动偏移后的剩余空间估算——两者计算基准完全不同。
例如：grid-template-columns: 1fr 1fr的容器里，某个子元素还保留着width: 50%; float: left，结果它的实际宽度可能变成50% of (parent width - float offset)，再被Grid二次分配，最终列宽塌缩、文字溢出或间隙错位。
这种错乱很难通过调margin或padding修复，因为根源是两套尺寸模型打架。
清除浮动方案对Grid结构无效或引入新问题
给Grid容器加overflow: hidden或clearfix类，看似“清除了浮动”，实则只是触发BFC包裹了浮动兄弟元素，对Grid内部布局毫无影响；若错误地把overflow: hidden加在Grid容器上，反而可能裁剪掉position: absolute子元素或阴影。
更隐蔽的问题是：display: flow-root虽能安全清除浮动，但它会让父容器变成新的BFC根，可能意外隔离margin collapse或影响相邻元素的层叠上下文，调试时不易察觉。
真正该清除的，从来不是float本身，而是混用带来的职责模糊——Grid管结构，float只该留在图文环绕这类局部内容里，且必须确保它不跨出单个grid item的边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
