shape-outside在富文本编辑器中基本无效，因其必须配合显式float、明确宽高及未被截断的浮动上下文才生效，缺一则浏览器静默忽略并显示“ignored”。
shape-outside 在富文本编辑器或动态 HTML 场景中基本无效，不是写法错，而是浮动上下文被破坏、尺寸未定、或缺少 float 显式声明 —— 直接加 shape-outside 几乎必然失效。
为什么写了 shape-outside 却完全没反应
浏览器根本不会触发环绕计算，常见原因包括：
-
float没设：必须显式写float: left或float: right；float: none、继承值、或被后续样式覆盖，等同于没写 - 图片没宽高：仅靠
max-width: 100%和height: auto会导致浮动区域塌陷，shape-outside被忽略（DevTools 里显示 “ignored”） - 父容器截断浮动流：如
overflow: hidden、display: flex、display: grid或contain: layout，会创建新 BFC，文字绕不进去 - 本地双击打开 HTML（
file://协议）：所有浏览器静默拒绝解析 PNG 的 alpha 通道，shape-outside: url(logo.png)必然降级为矩形
怎么让 shape-outside: url() 真正生效
用 SVG <clipPath> 是唯一稳定路径，避免 PNG 解析失败和跨域问题：
-
<svg>必须内联在页面中（如放在<body>底部），不能是外部文件或 base64 -
shape-outside: url(#cat-clip)中的#cat-clip必须与<clipPath id="cat-clip">完全匹配 -
<path d="...">坐标需按图片原始尺寸归一化（例如 200×200 图片，就用 0–200 范围，别用百分比混写） - 动态插入图片时，必须等
load事件后才设置样式，否则offsetWidth为 0，shape-outside不触发
响应式下 shape-outside 为什么会突然失效
它的计算基准是图片原始尺寸，不随缩放自动适配：
立即学习“前端免费学习笔记（深入）”；
-
circle(100px)永远是 100px，不管图片缩到 40px 还是 20px -
polygon(0 0, 100% 0, 100% 100%, 0 100%)中的100%是指元素自身宽高，不是视口宽度 - 小屏压缩 PNG 后 alpha 边缘糊成锯齿，浏览器识别失败，静默回退为矩形
- 必须每个断点重写整个
shape-outside声明，不能只改width—— 浏览器不会推导新轮廓
shape-margin 和 shape-image-threshold 怎么调才不白写
这两个属性只在 shape-outside 真正生效后才有意义：
-
shape-margin: 12px是文字与轮廓之间的“呼吸区”，不是 margin，也不影响图片位置 -
shape-image-threshold: 0.4可降低 PNG 边缘识别门槛（默认 0.5），但值太低会引入噪点 - Firefox 默认禁用
shape-margin，需手动开启layout.css.shape-margin.enabled实验标志 - 调试时先加
outline: 1px solid red看浮动盒真实范围，再开 DevTools 的 “Show shape outlines” 查轮廓是否渲染
最易被忽略的一点：你写的每一行 shape-outside 都依赖前序条件成立 —— 它不报错、不警告、不 fallback，只是安静地被跳过。验证顺序永远是：float → 尺寸 → 父容器 → 文字流 → 形状本身。
