shape-outside必须配合float:left/right使用，仅对浮动的块级替换元素（如img）生效；单独设置无效。最常见失效原因是未声明float，且文字需在普通流中、无clear/flex/grid干扰。
shape-outside 不是独立可用的属性，它必须和 float 一起用，且只对块级替换元素（比如 <img>）生效。单独写 shape-outside: polygon(...) 而不设 float，浏览器直接忽略。
为什么写了 shape-outside 没反应？
最常见原因是没配 float。CSS 不会因为你写了 shape-outside 就自动让元素浮动——它只是“修饰”已浮动元素的环绕轮廓。
-
float: left或float: right必须显式声明，float: none或未设置都无效 -
<img>默认是 inline 元素，但加了float后会变成块级盒，无需额外设display: block - 如果给
<div>用shape-outside，得确保它同时满足：有float、有明确宽高、是替换元素或含 SVG 内容（如::before伪元素 +content: url()） - 本地双击打开的 HTML（
file://协议）下，shape-outside: url(logo.png)几乎必失效——浏览器拒绝读取 PNG 的 alpha 通道，需部署到 HTTP 服务（如python3 -m http.server）并确认响应头含Access-Control-Allow-Origin: *
url()、polygon()、path() 三种值怎么选？
真正能表达“异形”的只有 url()、polygon() 和 path()；circle() 和 ellipse() 只生成规则几何形，无法贴合锯齿、手绘或镂空边缘。
-
url()最实用：指向透明背景 PNG 或 SVG，浏览器按 alpha > 0 区域生成轮廓。注意图片必须同源或带 CORS，否则降级为矩形 -
polygon()适合简单剪裁，如三角形头像：shape-outside: polygon(0 0, 100% 0, 100% 100%)。坐标基于元素盒模型，单位支持%、px等 -
path()灵活性最高，但兼容性要求 Chrome 102+、Firefox 111+、Safari 16.4+，适合复杂轮廓：shape-outside: path('M0,0 L100,0 L100,100 Z')
文字还是不贴边？检查这几个干扰点
即使 shape-outside 语法正确，文字也可能漂在图片下方或保持矩形环绕，问题往往出在布局上下文。
立即学习“前端免费学习笔记（深入）”；
- 文字内容必须是普通流内的块级元素（如
<p>、<div>），不能是display: flex或display: grid容器——它们创建新 BFC，切断环绕逻辑 - 文字元素自身不能设
clear: both或类似值，否则直接跳过整个浮动区域 -
shape-margin默认为0，若误设过大（如1em），文字会离形状太远；调试时建议先清零 - 图片父容器若设了
overflow: hidden或contain: layout，可能截断形状传播，临时移除再试 - DevTools 中给图片加
outline: 1px solid red，可直观确认形状是否渲染成功；Chrome 的 Layout 面板里能看到实际 shape outline
最容易被忽略的是：文字环绕只作用于后续普通流内容，对前面的兄弟节点、绝对定位子元素、或 flex/grid 子项完全无效。别指望它改变布局结构，它只是调整行框（line box）的换行路径。
