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></clippath> 是唯一稳定路径，避免 PNG 解析失败和跨域问题：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <svg></svg> 必须内联在页面中（如放在 底部），不能是外部文件或 base64
• shape-outside: url(#cat-clip) 中的 #cat-clip 必须与 <clippath id="cat-clip"></clippath> 完全匹配
• <path d="..."></path> 坐标需按图片原始尺寸归一化（例如 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 → 尺寸 → 父容器 → 文字流 → 形状本身。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！