grid容器内float声明被浏览器直接忽略，因css规范禁止对网格项使用float，其直系子元素的float属性不参与布局计算；浮动兄弟元素会干扰grid容器定位，fr单位与百分比混用导致尺寸错乱，清除浮动方案对grid结构无效。
Grid 布局中写 float 或 clear 不仅无效，还会埋下维护雷——浏览器根本不会计算它们，不是“没生效”，而是直接跳过。
Grid 容器内 float 为什么完全没反应
只要父元素设了 display: grid，它的直系子元素就自动成为网格项（grid item），此时 float: left、float: right 等声明在规范层面被禁止参与布局计算。DevTools 的 Computed 面板里，这些属性会显示为划掉状态，但控制台不报错，容易误判为优先级或加载问题。
- 常见现象：其他子项按
grid-template-columns正常排列，唯独一个带float的元素卡在左上角、尺寸异常、或与其他项重叠 - 检查点：确认该元素确实是 Grid 容器的**直系子元素**，而非嵌套在
.row或.wrapper这类中间层里 - 若它原本靠浮动实现图文环绕，应把
float移到其内部图片上（如.card img { float: right; }），而不是整个卡片本身
Grid 容器被兄弟级 float 元素挤偏怎么办
真正出问题的往往不是 Grid 内部，而是它上面或旁边的浮动元素（比如广告位、旧侧边栏）脱离文档流，导致 Grid 容器渲染起点偏移、背景色塌陷、justify-content: center 失效。
- 典型表现：Grid 容器整体右移、顶部留白异常、下方内容穿透显示
- 错误做法：给 Grid 容器加
clear: both—— 它对自身无效，且 DevTools 会标灰 - 正确解法：确保 Grid 容器的父级触发 BFC，例如用
display: flow-root（推荐）或overflow: hidden（注意裁剪风险） - 兜底策略：在 Grid 区域前统一加一个
<div class="content-start"></div>，并定义.content-start { clear: both; display: block; }
fr 单位和 width + float 混用导致列宽错乱
fr 基于容器的 padding-box 尺寸计算，而 width: 50% + float: left 依赖的是父容器总宽减去浮动偏移后的剩余空间——两套尺寸模型打架，结果就是列宽塌缩、文字溢出、间隙错位。
- 示例：父容器
grid-template-columns: 1fr 1fr，子元素却还留着width: 50%; float: left，实际宽度可能变成50% of (parent width - float offset)，再被 Grid 二次分配 - 修复方式：删掉所有残留的
width+float组合，改用grid-column: span 1或flex: 1控制占比 - 若需兼容旧代码，可将浮动区域包裹进单独的
div，设display: flow-root隔离影响，并让这个div作为单个 grid item 存在
最容易被忽略的，从来不是怎么写新 Grid 规则，而是旧 CSS 里还有多少地方默认“浮动还在起作用”——比如 JS 里监听 resize 后手动插入 clear 元素的逻辑、父容器上为容纳浮动而加的 overflow: hidden、甚至 HTML 中仍保留“左栏必须写在右栏前面”的 DOM 顺序依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
