浮动在grid容器子元素上被规范忽略，因grid接管定位逻辑；解决方法是用wrapper隔离浮动组件，并清除塌陷、处理尺寸与降级兼容性。
浮动元素在Grid容器里不生效，为什么？
因为 Float 在 display: grid 容器的直接子元素上完全被忽略——这是 css 规范明确规定的。Grid 布局接管了子项的定位逻辑，float 失去作用对象。
- 只对非 Grid/flex 容器的子元素有效；一旦父级设为
display: grid，float、vertical-align、甚至clear都失效 - 常见错误现象：
float: left写了但元素依然堆在顶部，或和 Grid 轨道冲突导致布局错乱 - 不是浏览器 bug，是规范行为，所有现代浏览器一致
如何让旧浮动组件“塞进”新 Grid 布局？
核心思路：不把浮动组件当 Grid 子项，而是用一层 wrapper 隔离它们的渲染上下文。
- 给浮动组件外层加一个
div，设为display: block（默认值即可），再把这个 wrapper 放进 Grid 轨道 - 确保 wrapper 本身不设
float，浮动只保留在内部子元素上 - 如果浮动组件依赖父宽（比如
float: right需要父容器有明确宽度），wrapper 必须设置width或min-width，否则 Grid 的弹性收缩会让浮动失效 - 示例：
<div class="grid-container"> <div class="grid-item"> <div class="legacy-float-wrapper"> <div class="old-module" style="float: left;"></div> <div class="old-module" style="float: right;"></div> </div> </div> </div>
Grid 中嵌套浮动时的清除与高度塌陷问题
浮动内容仍会导致 wrapper 高度塌陷，尤其当它作为 Grid track item 时，塌陷会破坏 Grid 行高计算。
- 必须在 wrapper 内部清除浮动，不能靠 Grid 自动撑开 —— 推荐用
overflow: hidden或display: flow-root（更语义、兼容性稍差） - 避免用
clear: both伪元素，它在 Grid 子项中可能被忽略或触发意外重排 - 如果 wrapper 是 Grid 的
grid-area，且设置了固定高度，浮动塌陷不会影响布局，但内容溢出可能被裁剪 —— 此时需检查overflow和min-height
IE11 兼容场景下 Grid + 浮动混合的底线方案
IE11 不支持 display: grid，但支持 float；如果你用 Autoprefixer + postcss-grid-kiss 等工具降级，要注意降级后浮动逻辑是否仍成立。
立即学习“前端免费学习笔记（深入）”；
- 不要在 Grid 声明旁写
float降级 fallback（如float: left; display: grid;），IE11 会执行float但忽略grid，其他浏览器则按 Grid 渲染，结果不一致 - 正确做法：用
@supports (display: grid)包裹 Grid 样式，浮动样式写在外部，作为默认回退 - 性能影响：混合使用不会增加重排开销，但每多一层 wrapper 就多一次 layout 计算 —— 老项目中建议批量封装，而非逐个加壳
浮动本身没坏，只是它和 Grid 属于两套互斥的布局协议。真正容易被忽略的是：wrapper 的尺寸边界、清除方式、以及降级时的声明顺序 —— 这三处出错，比语法错误更难定位。