grid 不能替代 float 实现文字环绕，因为 grid 子项脱离文档流，而 float 和 shape-outside 仅对流式布局元素生效；浏览器会静默忽略其上的 float 和 shape-outside，且 css exclusions 尚无主流支持。
Grid 不能替代 float 实现文字环绕——这不是能力问题，是规范层面的不可替代。试图在 grid 容器中直接用 float 或 shape-outside 让文字绕图，浏览器会静默忽略，且不报错，极易误判为“写法不对”。
为什么 grid-column / grid-area 里加 float 和 shape-outside 完全没反应
Grid 子项由 grid-column、grid-row 控制位置，天生脱离文档流；而 float 和 shape-outside 只对参与行内流式布局的元素生效。这是 CSS 规范明确规定的冲突：
- 浏览器强制忽略 Grid 容器直系子元素上的
float属性（包括float: left、float: right） -
shape-outside在 Grid 子项上无效，哪怕你写了shape-outside: circle(50%) -
::before伪元素或content: url()插入的图片也不参与外部段落的文字流计算 -
wrap-flow、wrap-through等 CSS Exclusions 属性至今未被任何主流浏览器支持（Chrome/Firefox/Safari 均标为 “No support”）
真正能跑通的图文环绕结构：Grid 控制区域，float 控制内部
必须把「图文共处一个流式容器」这个前提重建起来。Grid 只负责划分大区块（比如主内容区、侧栏），而把需要环绕的图片和文字一起放进某个 Grid 单元格内部的普通块级容器中。
- HTML 中，
<img>标签必须写在文字内容（如<p></p>）之前，否则环绕起点错位 - 图片设
float: left（或right）、显式width（或max-width: 100%）、height: auto，禁用display: block和margin: auto - 包裹图文的父容器（即 Grid 子项）不能设
overflow: hidden，否则会裁掉绕到图片下方的文字 - Grid 列轨道宽度要留足余量：若图片宽 180px，文字最小换行宽度约 200px，则列宽至少设为
minmax(400px, 1fr)
容易被忽略的关键细节
职责分层一旦混淆，失败就是常态。最常踩的坑不是代码写错，而是思维混用：
- 给
.grid-item加float—— 无效，因为它是 Grid 子项 - 在
grid-template-areas里尝试让文字自动绕图 —— 不可能，Grid 没有文本流感知能力 - 用
aspect-ratio+object-fit替代固定宽高 —— 可能导致shape-outside计算偏差，优先用显式width/height - Safari 对
shape-outside: url(#my-path)支持极差，应优先选circle()或polygon()
复杂点不在怎么写，而在怎么想：Grid 是区域划分工具，float 是流式内容编排工具。把它们放在各自该管的层级上，才是稳定路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
