Grid 布局与浮动混用必然出问题，因 Grid 容器内 float 无效，而兄弟或嵌套浮动会干扰文档流，导致错位、塌陷；应分离职责：Grid 管整体结构，浮动仅限隔离的局部上下文。
Grid 布局和浮动（float）本质上属于不同代际的布局机制，混合使用极易引发错位、塌陷、尺寸计算异常等问题。根本解法不是“调样式修错位”，而是主动分离布局职责：Grid 管整体结构，浮动应被替代或严格限制在 Grid 单元内部且不参与外层流体计算。
为什么混用必然出问题
Grid 容器会将子元素视为网格项（grid item），自动忽略其 float 声明（CSS 规范明确要求：浮动对 grid item 无效）。但若浮动元素是 Grid 容器的兄弟元素，或嵌套在未设 display: grid 的父容器中，就会干扰文档流，导致 Grid 容器定位偏移、高度塌陷或与其他元素重叠。
立即停止混用的三个操作
-
移除 Grid 容器内所有 float 声明：Grid 本身支持对齐（
justify-self、align-self）、自动换行（grid-auto-flow）和内容包裹（place-content），无需浮动实现图文环绕或侧边栏。 -
把原本靠浮动实现的“局部排列”改用 Grid 或 Flex：例如新闻卡片列表、图标+文字组合，用
display: grid或display: flex替代float: left+margin模拟。 -
若必须保留旧浮动代码（如第三方组件），用 wrapper 隔离：给浮动区域包一层
div，设overflow: hidden或display: flow-root清除浮动影响，并确保该 wrapper 不是 Grid 容器的直接子项，或将其作为单个 grid item 处理。
替代浮动的现代写法示例
比如传统浮动实现的两栏图文：
❌ 过时写法（混用风险高）
✅ 推荐写法（纯 Grid）
正文
侧栏
正文
侧栏
特殊情况：需要图文环绕怎么办
CSS Grid 和 Flex 都不直接支持文字环绕图片（wrap text around image），此时应：
立即学习“前端免费学习笔记（深入）”；
- 用
shape-outside+float，但仅限于该图片自身所在的块级上下文，且该块不能是 Grid 容器的直系子元素； - 更稳妥的做法是用
column-count实现多栏文本，再用position: relative+margin微调图片位置； - 或等待
flow-into/flow-from（CSS Regions）成熟，目前浏览器支持有限，不建议生产环境使用。
