shape-outside 仅作用于已设 float 的块级元素，不触发浮动也不改变文档流，仅重定义文字绕排边界；脱离浮动上下文即失效，不可与 flex/grid 共用。
shape-outside 不是独立排版属性，它只修饰浮动上下文
浏览器规范明确要求 shape-outside 必须作用于已建立浮动上下文的块级元素；它本身不触发浮动，也不改变文档流位置，只是“重定义”文字绕排的边界轮廓。没 float: left 或 float: right，就等于没有这个上下文——CSS 引擎直接跳过该声明，DevTools 里会显示划掉的 shape-outside，且不报错。
常见失效场景：float 漏了、错了、被覆盖了
这些情况都会让 shape-outside 彻底静默：
-
float: none或压根没写float声明（哪怕写了shape-outside: circle(50%)也没用） -
float写在父容器上（如div { float: left }），但图片是子元素且未继承浮动行为 -
img被其他规则覆盖，比如float: unset或display: inline-block干扰了浮动定位 - 用了
position: absolute或display: flex子项，浮动被现代布局系统忽略
为什么不能和 flex/grid 一起用？
因为 float 的语义是“脱离当前行内流、影响后续文本流”，而 display: flex 或 display: grid 的子项默认脱离普通文档流，文字无法感知其浮动区域。结果就是：
- 父容器设了
display: flex→ 图片变成 flex item →float失效 →shape-outside被忽略 - 父容器设了
overflow: hidden或display: flow-root→ 触发新 BFC → 文字流被隔离，绕不进浮动区域 - 文字和图片不在同一个 BFC 内（比如文字在
article，图片在aside）→ 绕排根本无从发生
替代方案不是“不用 float”，而是“别用 shape-outside”
如果项目必须用 Flex/Grid 布局，就别硬套 shape-outside。它和浮动是强绑定的一对，不是可插拔模块。此时更实际的做法是：
- 放弃非矩形环绕，用
margin+align-self控制图文间距 - 用
clip-path做视觉裁剪（不影响文字流） - 服务端或构建时生成带透明通道的 PNG，靠 alpha 边缘实现近似环绕（仅限简单场景）
真正麻烦的从来不是语法写错，而是把 shape-outside 当成通用形状控制属性去用——它只活在浮动的盒模型里，出了这个上下文，就什么也不是。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
