Grid本身不支持文本环绕图片，shape-outside仅对浮动元素生效；必须将图文共置一个普通块级容器内并用float实现环绕，再将该容器作为Grid的一个单元格。

Grid 本身无法实现文字环绕图片，shape-outside 在 Grid 子项上完全无效——这不是写法问题，而是规范层面的限制。

为什么 grid-area 里加 shape-outside 没反应

浏览器明确忽略 Grid 容器中子元素的 float 和 shape-outside。原因很直接：Grid 子项由 grid-column/grid-row 控制位置，已脱离文本流；而 shape-outside 只作用于参与行内流式布局的浮动元素（float: left 或 float: right），两者底层机制冲突。

• 即使给 .image 加了 float: left 和 shape-outside: circle(50%)，只要它是 display: grid 容器的直系子项，就必然失效
• overflow: hidden、display: block、margin: auto 这类常见样式会进一步破坏环绕所需的流式上下文
• 用 ::before 伪元素插入图片或通过 content: url() 生成，同样不参与外部段落的文字流计算

真正能跑通的结构：Grid 控制区块，float 控制内部图文

必须把「图文共处一个流式容器」这个前提重建起来。做法是：让 Grid 只负责划分大区域（比如主内容区、侧边栏），而把需要环绕的图片和文字一起塞进某个 Grid 单元格内部的普通

或

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

里。

• HTML 中图片标签必须出现在文字内容之前，否则环绕从段落开头就开始，视觉错位
• 该内部容器（即 Grid 子项）不能设 overflow: hidden，否则会裁掉文字绕到图片下方的部分
• 图片需设 float: left、width 和 height（固定值或等比缩放）、margin-right: 12px，禁用 display: block
• 如果 Grid 列宽是 200px，但图片宽 180px + 文字最小宽度 200px，那文字根本没空间绕，只能换行到底部——列轨道得留足余量

shape-outside: url() 在 Safari 里挂了怎么办

Safari 至今不支持 shape-outside: url(#svg-path) 或 shape-outside: url(image.svg)，哪怕 SVG 路径闭合、背景透明、尺寸明确。这是硬性兼容缺口，不是配置问题。

• 想跨浏览器稳定生效，优先用 shape-outside: circle(50%) 或 polygon() 这类 CSS 内置函数
• 若必须用 SVG 路径，Chrome/Firefox 可行，但得确保 内只含单个 ，无 、 或多余属性
• 别依赖 wrap-flow 或 wrap-through——Exclusions 草案仍无任何浏览器实现，caniuse 标为 “No support”

最易被忽略的一点：Grid 和 float 是两层职责。Grid 管“哪块内容放哪”，float 管“这块里图和字怎么缠”。混在一起调，99% 的失败都卡在这儿。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！