Grid 不支持文本环绕图片，shape-outside 仅对浮动元素生效；Grid 子项的 float 被忽略，必须将图文容器作为 Grid 单元格，在其内部用 float 实现环绕。
Grid 本身不支持文本环绕图片，shape-outside 也只对浮动元素生效，不是 Grid 的能力范围。
为什么 grid + shape-outside 不起作用
很多人试过给 Grid 子项（比如 .image）加 float: left 和 shape-outside: circle()，结果文字根本不绕——因为一旦元素是 Grid 容器的直接子项，它就受 Grid 轨道控制，float 会被忽略（CSS 规范明确：浮动在 Grid/ Flex 容器中无效）。
- Grid 子项的定位由
grid-column/grid-row决定，脱离文档流是“被动”的，不是靠 float 主动脱离 -
shape-outside必须配合float+ 行内流式上下文，而 Grid 容器内部没有传统文本流 - 即使把图片塞进
::before或用content: url()，生成的内容仍无法参与周围段落的文字环绕计算
想在 Grid 区域里“模拟”环绕效果，只能靠结构拆分
真正可行的做法，是把「环绕区域」从 Grid 布局中抽出来，让图片和文字共处一个普通块级容器（如 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或 <div>），再把这个容器作为 Grid 的一个单元格。这样，容器内部仍可使用 <code>float 触发环绕。
- HTML 中，图片必须写在文字内容之前，否则环绕起点错位
- 图片设
float: left、margin-right: 12px、height: auto，禁用display: block或margin: auto - 包裹它的父容器（即 Grid 子项）不要设
overflow: hidden，否则会裁掉环绕溢出部分 - 如果 Grid 网格列宽固定，需确保该单元格足够宽，否则文字没空间绕，会直接换行到底部
Exclusions 草案至今未被主流浏览器支持
wrap-flow、wrap-through 这些来自 CSS Exclusions 的属性，本意就是让文本绕开任意定位元素（包括 Grid 子项），但它们仍停留在 Editor’s Draft 阶段。截至 2026 年 4 月：
立即学习“前端免费学习笔记（深入）”；
-
wrap-flow: both在 Chrome/Firefox/Safari 中均无实现 -
shape-outside只在float或position: absolute元素上有效，且后者需配合clip-path才能影响文本流——但绝对定位元素又脱离了 Grid 轨道控制 - 别在生产环境依赖 Exclusions，连 caniuse.com 都标为 “No support in any browser”
真正稳定可用的路径只有一条：Grid 控制大区块划分，float 控制区块内的图文关系。混淆这两层职责，是绝大多数失败案例的根源。
