shape-outside在富文本编辑器中基本无效，因其必须配合float生效，而编辑器中图片常无float、尺寸未定且dom重排破坏浮动上下文；需同时满足：显式设置float、shape-outside非none并指向有效形状、图片有明确宽高或aspect-ratio。
shape-outside 为什么在编辑器里基本用不了
直接在富文本编辑器（比如 contenteditable 区域）里对图片设置 shape-outside，文字大概率不会环绕——不是语法写错，而是浏览器根本不触发浮动布局。因为 shape-outside 必须配合 float 才生效，而现代编辑器中图片常被包裹在 <figure></figure>、<div> 或内联样式中，且默认 <code>float: none；更关键的是，contenteditable 的 DOM 变更会频繁重排，导致浮动上下文不稳定，shape-outside 计算失效或延迟渲染。
必须满足的三个硬性条件
想让 shape-outside 在编辑器中真正起作用，这三点缺一不可：
-
img元素必须显式设置float: left或float: right（不能靠父容器继承或 CSS 重置） -
shape-outside的值不能是none，且必须指向一个可解析的形状：比如url()指向 SVG<clippath></clippath>，或polygon()坐标列表 - 图片必须有明确的
width和height（或通过aspect-ratio固定比例），否则浏览器无法确定浮动区域尺寸，shape-outside会被忽略
用 SVG clipPath 实现不规则轮廓最可靠
比起 polygon() 手动描点（难维护、响应式下易错位），用 SVG <clippath></clippath> + url(#id) 是编辑器场景下的更优解。SVG 路径可预置、可缩放、支持透明通道识别边缘。
示例结构：
<svg width="0" height="0" style="position: absolute"><defs><clippath id="cat-clip"><path d="M20,50 C30,20 70,10 90,40 L85,80 C75,90 45,95 30,70 Z"></path></clippath></defs></svg> @@##@@
注意：<svg></svg> 要放在编辑器容器外（如页面 底部），避免被编辑器内容操作误删；clipPath 中的 <path></path> 坐标需按图片原始宽高归一化（例如 200×200 图片，路径坐标就用 0–200 范围）。
编辑器中动态插入时的坑
用户粘贴或拖入图片后，JS 动态加样式很容易漏掉关键声明：
- 只加
shape-outside，没补float→ 完全无效 - 用
getComputedStyle读取图片尺寸时，若图片未加载完成，offsetWidth为 0 →shape-outside被忽略，需监听load事件后再设样式 - 服务端返回的图片带
width/height属性但值为百分比（如width="100%"）→ 浏览器无法计算浮动区域，必须转成像素值或用aspect-ratio - 编辑器框架（如 Slate、Quill）可能对
img外层自动包裹<span></span>→ 浮动被中断，需确保float和shape-outside直接作用于img元素本身
真正难的不是写出那个 polygon()，而是让编辑器每次插入图片后，都稳定维持住浮动上下文、尺寸信息和形状引用这三者的同步。稍有脱节，文字就直愣愣地从图片正下方开始排，跟没写一样。
