文字绕不规则图形流动需同时满足四个条件：显式float、非inline元素、明确宽高、父容器不截断浮动；推荐内联SVG+url(#id)定义轮廓，配合clip-path和shape-margin实现视觉一致。
要让文字真正绕着不规则图形流动，核心不是“画个形状”，而是让浏览器知道：**文字该沿着哪条线走**。这必须靠 shape-outside 配合 float 实现——单独写任何一个都没用。
必须同时满足的四个硬性条件
缺一不可，否则 DevTools 里会直接标出 “shape-outside: ignored”：
-
显式设置浮动：
float: left或float: right（float: none或未声明 = 失效） -
元素不能是 inline：如
<img>推荐加display: block；纯<div>必须设display: block并有内容或伪元素 -
宽高必须明确：用
width/height，或aspect-ratio（Safari 15.4+ 支持）；没有尺寸，polygon()等函数根本找不到坐标系基准 -
父容器不能截断浮动区域：禁用
overflow: hidden、contain: layout，也别用display: flex或display: grid包裹——它们会创建新 BFC，把形状“关”在里面
怎么定义不规则轮廓才靠谱
三种主流方式，按推荐度排序：
-
内联 SVG +
url(#id)：最稳。把<path>写在 HTML 的<svg><defs>里，再用shape-outside: url(#my-path)引用。无跨域问题，iOS Safari 16.4+ 支持，路径长度别超 500 字符 -
polygon()百分比描点：适合响应式。所有坐标按元素自身宽高算，比如polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%)是右下缺角；别写100% 100%这种满格点——那还是矩形，要“缺”就得往里缩 -
PNG 透明图（慎用）：必须部署在 HTTP 服务上（如
python3 -m http.server），且响应头含Access-Control-Allow-Origin: *；本地双击打开（file://）必失效；导出时确保 Alpha 通道干净，可配shape-image-threshold: 0.4拉低识别阈值
别忘了同步处理图片视觉和文字距离
shape-outside 只管文字怎么绕，不管图片本身长什么样：
立即学习“前端免费学习笔记（深入）”；
-
必须加
clip-path：否则图片还显示原矩形框，只文字绕形，视觉上极违和。路径需与shape-outside完全一致，例如都用polygon(...) -
用
shape-margin控制呼吸感：比如shape-margin: 12px表示文字离轮廓边缘保持 12px 空隙；它不是 margin，不影响元素定位，值可用 px/em/rem -
调试时加两行：
outline: 1px solid red看浮动元素真实占位，再叠一层background: rgba(0,0,0,0.08)看描点是否贴合预期
移动端和响应式特别注意
小屏缩放会让绝对单位路径彻底错位：
- 放弃
px坐标，统一用%、vmin或calc() - 媒体查询中必须重写整个
shape-outside声明，不能只改值 - 旧版 iOS（如 15.x）不支持
path()，安卓 WebView 兼容性也参差，建议 fallback 到ellipse()或简化polygon()，甚至小屏直接关掉环绕效果
