shape-outside不是定位技术，仅定义浮动元素的文字环绕边界，必须配合float:left/right生效；脱离浮动上下文、宽高未定、父容器触发BFC或文字不在普通流中均导致失效。
shape-outside 不是定位技术，它不移动元素、不改变盒模型、也不参与层叠上下文——它只告诉浏览器：「这块浮动区域的文字流，该绕着哪条线走」。想靠 position: absolute 或 transform 实现文字环绕，结果只会是文字堆叠或错位，根本绕不起来。
为什么 float + shape-outside 是唯一可行路径
浏览器对文字环绕的计算逻辑只存在于浮动上下文中。CSS Shapes 规范明确限定：shape-outside 必须配合 float: left 或 float: right 才会被解析；其他任何布局方式（display: flex、display: grid、position: relative/absolute）下，该属性直接被忽略，DevTools 里显示为划掉或 none。
- 写了
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%)却没反应？先查float是否显式声明，不是继承值，也不是父级设置的 -
img默认是display: inline，底部有留白，建议加display: block避免基线干扰 - 文字必须是后续普通流中的块级元素（如
<p>、<div>），<span>或 flex 容器子项不会响应shape-outside
shape-outside: url() 在编辑器里总失效的根源
富文本编辑器（contenteditable）中动态插入图片后，shape-outside: url(#cat-clip) 常常不生效，不是写法错，而是三个关键环节断了：
- SVG
<clipPath>必须放在编辑器容器外（比如<body>底部），否则用户删段落时可能误删<defs> - 图片加载完成前就设样式 →
offsetWidth为 0 → 浏览器跳过形状计算 → 必须监听img.onload后再应用float和shape-outside - 服务端返回的
width="100%"或height="auto"→ 浏览器无法确定浮动区域尺寸 →shape-outside被静默丢弃
响应式下 polygon() 坐标错位怎么稳住
桌面端描好的 polygon(20px 50px, 180px 50px, ...) 到手机上全跑偏，是因为像素单位不随缩放变化。解决方式很直接：
立即学习“前端免费学习笔记（深入）”；
- 放弃 px，全部改用 %：坐标基于图片自身宽高，只要宽高比稳定（靠
aspect-ratio或固定width/height），百分比就能随缩放自适应 - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)—— 这还是矩形；要“缺角”，就把对应点往里缩，比如右下角从100% 100%改成80% 80% - 调试时必加两行：
outline: 1px solid red看浮动盒子真实范围，再叠一层background: rgba(0,0,0,0.1)验证描点是否贴合预期
移动端兼容性最易被忽略的硬限制
iOS Safari 直到 16.4 才支持 shape-outside: path()，大量企业设备仍卡在 iOS 15.x；安卓 WebView 若基于旧版 Chromium（如 Chrome 79 以下），url() 和复杂 polygon() 也会静默失效。
- 降级策略不是“优雅”，而是必须：小屏直接关掉
shape-outside，设float: none+width: 100%，再用clear: both保证文字重排 - 父容器若含
overflow: hidden、contain: layout或display: flow-root，会创建新 BFC，直接截断浮动传播 → 文字绕不到任何形状 -
shape-margin控制的是文字与轮廓之间的空白区，不是元素 margin；调太大会让文字离图太远，调太小则易贴边难读，建议从8px起调
真正麻烦的从来不是怎么写 shape-outside，而是怎么守住那几个硬性前提：float 显式存在、宽高可计算、父容器不截断、SVG 不被删、图片加载完成才设样式——漏掉任意一个，效果就归零。
