grid容器内浮动元素完全失效，因css规范明确禁止对网格项使用float，其直系子元素的float声明会被浏览器忽略且不参与布局计算。
Grid容器内浮动元素为何完全失效
因为CSS规范明确要求：浮动对grid item无效。只要父容器设了display: grid，它的直系子元素就自动成为网格项，float: left或float: right会被浏览器直接忽略——不是“没效果”，而是压根不参与布局计算。
常见现象是：其他子项按grid-template-columns正常排列，唯独一个带float的元素卡在左上角、尺寸异常、或与其他项重叠。控制台不会报错，但Computed面板里能看到float属性被划掉。
- 检查目标元素是否仍通过类名（如
.pull-left）间接设置了float - 确认它确实是Grid容器的**直系子元素**，而非嵌套在
.row之类中间层里 - 若该元素原本靠浮动实现图文环绕，保留
float仅限于其内部内容（如.card img），而非整个卡片本身
嵌套Grid中fr单位与浮动宽度混用导致尺寸错乱
fr单位永远基于当前容器的padding-box尺寸计算，而浮动时代常用的width: 25%依赖的是父容器总宽减去浮动干扰后的剩余空间——两者计算基准完全不同，强行混用必然导致列宽塌缩、内容溢出或间隙错位。
例如：父Grid设grid-template-columns: 1fr 1fr，子容器却还留着width: 50%和float: left，结果子容器实际宽度可能变成50% of (parent width - float offset)，再被1fr二次分配，彻底失准。
- 删掉所有嵌套层级中的
float、width、margin补偿声明 - 子Grid的列宽统一用
grid-template-columns: repeat(2, 1fr)或固定值（200px） - 全局补一句
box-sizing: border-box，避免旧CSS漏设导致padding/border挤占1fr空间
subgrid启用失败时的轨道定义陷阱
写了grid-template-columns: subgrid却没对齐？大概率是父容器没显式定义轨道。subgrid不认repeat(auto-fit, ...)这类隐式生成的轨道，也不接受gap或grid-auto-columns替代。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
浏览器会静默丢弃整条subgrid声明，Computed面板里grid-template-columns显示none就是铁证。
- 父容器必须同时满足：
display: grid+ 显式grid-template-columns: 1fr 2fr 1fr（不能只写gap） - 子元素必须是父Grid的**直接子元素**，不能被
display: contents或多余wrapper隔开 - 子元素自身也要设
display: grid，否则subgrid无处挂载
旧项目中浮动与Grid共存的隔离底线
第三方组件或CMS输出的内容常自带float，无法直接删除。此时唯一安全做法是用BFC隔离，而不是试图在Grid容器内“调和”冲突。
重点不是让浮动生效，而是阻止它污染Grid流——overflow: hidden比clear: both更可靠，display: flow-root语义更清，但IE11需降级为overflow: hidden。
- 给含浮动内容的Grid区域加
overflow: hidden，确保高度不塌陷 - 若该区域需图文环绕，
float只允许出现在img等内联级元素上，且父容器不能是Grid item的直接父级 - 避免在Grid容器上写
float: left降级fallback，IE11会执行float但忽略grid，现代浏览器则只走grid，结果必然不一致
真正麻烦的从来不是语法写错，而是DOM层级和盒模型假设被旧代码悄悄改写了。动手前先用开发者工具点开Computed，看display和grid-template-columns的实际值，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
