shape-outside 仅作用于已浮动的块级替换元素且需明确尺寸：必须同时满足 float:left/right、块级替换元素（如带float的img或display:block+content:url()的div）、可计算宽高三个条件，缺一则静默失效。
shape-outside 本身不触发浮动，只重定义文字流边界
写了 shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%) 却没反应？不是语法错，而是浏览器压根没启用它——shape-outside 只修饰**已浮动元素**的文字环绕路径，不负责让元素浮动，也不改变盒模型、不触发重排。它干的事很窄：告诉浏览器“这个已经 float: left 的盒子，文字别按矩形绕，按我给的多边形绕”。没 float，就等于没开开关，DevTools 里直接标 shape-outside: ignored。
必须同时满足 float + 块级替换元素 + 明确尺寸
三个条件缺一不可，漏一个就静默失效：
-
float: left或float: right必须显式声明；float: none、未设、或被父容器（如display: flex）覆盖，效果归零 - 元素得是块级替换元素：
<img>加了float后自动块化；纯<div> 得配 <code>display: block+content: url(...)伪元素，否则不是“替换元素”，shape-outside不认 - 宽高必须可计算：不能只靠
max-width: 100%；circle(50%)和polygon()全部基于元素自身width/height基准，没值就无从算起；aspect-ratio可替代固定height，但需配合明确width - 用
shape-outside: url(logo.png)但没确保 PNG alpha 通道干净（毛边/抗锯齿像素低于shape-image-threshold: 0.5默认阈值），结果文字绕了个模糊轮廓 - SVG 内联后写
shape-outside: url(#myPath)，但 ID 大小写错、含空格、或<path></path>坐标超出元素尺寸范围，静默失败 - 对 SVG 元素加
transform: scale(0.8)，shape-outside读的是原始d值，不是缩放后位置，导致文字绕偏 - 本地双击打开 HTML（
file://协议）下，shape-outside: url(logo.png)必然因 CORS 拒绝加载，必须跑在 HTTP 服务上（如python3 -m http.server） - 富文本编辑器中动态插入图片时，JS 只加
shape-outside却漏掉float，或图片onload前就读取offsetWidth（为 0），导致形状计算被跳过 - iOS Safari 16.4 以下不支持
path()函数，复杂路径直接回退为矩形，且无任何报错提示 - 响应式场景下，
polygon()用%单位时，小屏缩放后顶点坐标按新尺寸重算，原设计的“右下缺角”可能变成“左上穿孔”，得靠媒体查询重置或改用px固定尺寸
shape-outside 路径与视觉呈现完全解耦
你看到的图片可能被 clip-path 剪成云朵，但文字仍绕着 shape-outside 定义的圆形走——两者互不感知。常见误操作：
移动端和编辑器里最容易踩的硬伤
不是代码不行，是环境卡死：
shape-outside，而是浮动区域是否被父容器裁剪、尺寸是否稳定、路径是否与视觉一致——这些细节不验证，写再漂亮的 polygon() 也白搭。
