shape-outside没反应是因为未进入浮动上下文：必须显式声明float:left/right，元素需display:block、有明确宽高，且父容器不能含overflow:hidden、flex或grid等截断浮动的样式。
为什么写了 shape-outside 却完全没反应
浏览器直接忽略该声明，DevTools 里显示 shape-outside: ignored——不是代码写错，而是根本没进浮动上下文。它只修饰已浮动元素的轮廓，不触发浮动本身。
-
float: left或float: right必须显式声明；float: none、未设置、或被父容器（如display: flex）覆盖，效果等同于没写 -
默认是
display: inline，底部留白会干扰对齐，建议加display: block - 图片必须有明确宽高：
width和height都得设（哪怕用aspect-ratio），仅靠max-width: 100%不够 - 父容器不能创建新 BFC：
overflow: hidden、contain: layout、display: flex或display: grid都会截断浮动传播，形状“不可见”
shape-outside: url() 在编辑器里为什么总失效
富文本编辑器中动态插入图片时，url() 路径加载失败是静默降级，不会报错，但文字立刻回退到矩形绕排。
- 本地双击打开（
file://协议）下，所有浏览器都不解析 PNG 的 alpha 通道，必须跑在 HTTP 服务上（如python3 -m http.server） - 服务端返回的图片若带
width="100%"这类百分比属性，浏览器无法计算浮动区域尺寸，shape-outside被忽略 - SVG 必须内联在页面
底部（非编辑器内容区），且<clippath></clippath>中的<path d="..."></path>坐标需按图片原始宽高归一化（例如 200×200 图片，坐标就用 0–200 范围） - JS 动态加样式时，常漏掉
float—— 只加shape-outside没用；更隐蔽的是，offsetWidth在图片load前为 0，此时设样式也无效
响应式场景下 polygon() 坐标为什么会偏移
polygon() 所有点都基于该浮动元素**当前宽高**计算，不是视口、也不是父容器。缩放后，原坐标系全乱，文字可能直接掉到图下方。
- 固定尺寸场景：统一用整数
px（如10px，别用10.5px），Firefox 对小数敏感 - 响应式场景：统一用
%，但所有点都按当前元素尺寸解析；别写polygon(0 0, 100% 0, 100% 100%, 0 100%)—— 这仍是矩形；要实现缺角，得把对应顶点往内缩（如右下角从100% 100%改成80% 80%） - 每个媒体查询断点必须重写整个
shape-outside声明，浏览器不会自动推导等效形状 - 调试必加：
outline: 1px solid red看浮动元素真实范围，再叠一层background: rgba(0,0,0,0.1)验证描点是否贴合预期
移动端和 Safari 上最稳妥的落地方式
iOS Safari 直到 16.4 才支持 path() 函数，旧版本静默失效；路径字符串超 500 字符时解析失败概率陡增，且无提示。
- 优先降级：先用
circle(50%)或简单polygon()（如polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)）验证流程通不通 - 必须同步加
clip-path：否则图片本身仍显示原矩形，仅文字绕形——视觉上还是“方图+歪字” - 若必须用复杂路径，从 Figma 导出 SVG，提取
<path d="M10,20 C30,5"></path>中的d值，手动粘贴进 CSS，删掉换行和多余空格 - 移动端建议用
shape-margin: 8px控制文字与形状间距，避免紧贴边缘影响可读性；别混用margin，容易叠加出意外空白
shape-outside 就只是 CSS 文件里一行安静的注释。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
