要实现文字绕不规则形状，必须对浮动元素使用shape-outside并设置宽高；polygon坐标需正确缩进以“抠形”，shape-margin是文字与形状轮廓的缓冲距离，非布局边距；兼容性差，关键场景建议降级为margin留白。
float遇到不规则形状时文字不环绕？先确认shape-outside是否生效
纯float只能让文字绕矩形框，要绕不规则形状（比如圆形、多边形、SVG路径），必须配shape-outside。但很多人写了shape-outside: circle(50%)却没效果——根本原因是：该元素必须是float的，且不能是inline元素，还得有明确宽高。
-
shape-outside只对float元素起作用，position: absolute或display: inline-block都不行 - 元素需设置
width和height，否则circle()、polygon()等函数无法计算基准 - 如果背景图是SVG，用
shape-outside: url(#my-shape)时，确保SVG中<clippath></clippath>或<path></path>已定义ID且内联在HTML里（外部SVG文件不被支持）
用polygon()手动描点时坐标单位容易错
比如想让文字绕一个左上缺角的四边形，写shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%)还是绕整块矩形——因为所有点都是默认盒模型的边缘坐标，没“抠掉”任何区域。真正要实现缺角，得把那个角的点往里缩。
- 坐标单位统一用
%或px，别混用；%基于浮动元素自身宽高，不是父容器 - 常见错误：写
polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)以为能切右下角，实际是切左下——顺序和起点决定形状朝向 - 调试建议：先加
outline: 1px solid red看浮动元素真实范围，再叠一层半透background验证polygon描点是否贴合预期
shape-margin不是边距，是文字与形状之间的“呼吸区”
shape-margin常被当成margin理解，但它只控制文字内容到shape-outside轮廓的最小距离，不影响元素自身布局位置。设成20px，文字不会被“推开”，而是紧贴着这个20px缓冲带流动。
- 值可以是
px、em、rem，不支持% - 和
float自身的margin叠加生效：若float元素设了margin-right: 30px，又设shape-margin: 20px，文字离形状轮廓是20px，但离浮动元素右边框是50px - 动态内容（如字体大小变化）下，
shape-margin不会自动缩放，用em比px更适应排版变化
兼容性差是硬伤，别在关键文案流里赌shape-outside
Chrome/Firefox/Edge 100+支持完整，但Safari直到16.4才支持url()和polygon()，iOS Safari 16.0及更早全不认。用之前先问：这文字环绕是“锦上添花”还是“不绕就看不懂”？
立即学习“前端免费学习笔记（深入）”；
- 服务端无法检测客户端是否支持
shape-outside，CSS级降级只能靠@supports，但老浏览器直接忽略整个规则块 - 替代方案不是JS重排，而是用两套DOM：一套带
float + shape-outside，一套纯margin留白模拟——用@supports (shape-outside: circle())包裹前者 - SVG
<path></path>作为shape-outside源时，路径必须闭合（首尾点重合），否则部分浏览器渲染异常
真正难的不是写对那几行CSS，是判断什么时候该放弃它——比如图文混排中标题下方紧接绕图正文，一旦shape-outside失效，文字直接覆盖图片，这种场景不如老实用margin空出固定间隙来得稳。
