shape-outside必须配合float:right才生效，仅设shape-outside无效；常见失效原因：未显式声明float:right、为inline需加display:block、宽高未固定、父容器创建新BFC截断浮动。
shape-outside 必须配合 float: right 才生效，只写 shape-outside 不加 float 就等于没写。
为什么右浮动 SVG 文字不绕？先查这四点
常见错误现象：shape-outside 在 DevTools 里被划掉，文字全堆在图标下方，像没设置过一样。
-
float: right没显式声明——float: none或未写 = 彻底无效 -
<svg></svg>默认是display: inline，必须加display: block，否则基线对齐会干扰环绕流 - 宽高没定死：
width和height都得有具体值（不能只靠max-width: 100%或aspect-ratio） - 父容器截断了浮动传播：含
overflow: hidden、display: flex、display: grid或contain: layout会创建新 BFC，shape-outside直接“不可见”
shape-outside: url() 用透明 PNG/SVG 轮廓时的硬限制
想让文字贴着 SVG 图标的锯齿边缘走？别直接用 <svg></svg> 标签本身做 url() 源——浏览器只认图片文件的 alpha 通道，不解析内联 SVG 的路径。
- 必须导出为带透明背景的 PNG 或 SVG 文件（推荐 SVG，缩放无损），并确保服务器允许跨域（
CORS头要开） -
url("icon-outline.svg")中的路径必须可访问，404 或跨域拒绝会导致shape-outside静默失效 - iOS Safari ≤ 16.3 不支持
shape-outside: url()，会退化为矩形环绕；安卓 WebView 若基于旧 Chromium（如 Chrome 79-），同样忽略 - 调试时加
outline: 1px solid red看浮动盒子范围，再叠一层background: rgba(0,0,0,0.05)确认轮廓是否对齐预期
响应式下 polygon() 坐标错位怎么稳住
桌面端调好的 polygon(20px 50px, 180px 50px, 180px 120px) 到手机上全飘移，是因为 px 单位不随缩放变化。
立即学习“前端免费学习笔记（深入）”；
- 全部改用
%：坐标基于 SVG 元素自身宽高，只要width和height固定（比如width: 80px; height: 80px;），百分比就能自适应 - 右浮动时，注意
polygon()的点顺序要顺时针或逆时针闭合，否则某些浏览器（如 Safari）可能渲染异常 - 别写
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)——这是矩形；要“右上缺角”，就把第一个点从0% 0%改成15% 0%，第二个点从100% 0%改成100% 12% - 移动端建议直接降级：
@media (max-width: 768px) { svg { float: none; shape-outside: none; margin: 0 auto; display: block; } }
最易被忽略的点：SVG 必须有明确 viewBox，且导出时保留透明区域；否则 url() 轮廓会塌成实心块，文字绕的是“方块”不是“形状”。
