shape-outside 必须与 float 配合使用才生效；单独设置无效，因浏览器仅对浮动元素计算绕行路径，且需固定宽高、display: block 等前提条件。
shape-outside 要生效，必须和 float 配合使用，缺一不可；单独写 shape-outside: circle(50%) 一定无效。
为什么 shape-outside 没反应？常见失效原因
不是语法写错了，而是硬性前提没满足：
-
img没设float: left或float: right—— 浏览器直接忽略该属性 - 父容器用了
display: flex或display: grid—— 浮动被“压制”，形状计算不触发 - 图片没设固定宽高（比如只用
max-width: 100%）——circle(50%)缺少计算基准，按 0 处理 - 父容器有
overflow: hidden、display: flow-root等触发新 BFC 的样式 —— 文字流被隔离，绕不到图边
调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Show shape outlines”，能直接看到路径是否渲染出来。
shape-outside: circle(50%) 怎么写才真正可靠
最简可行组合就这五条，少一条都可能失败：
-
float: left（或right）必须显式声明 -
width和height必须固定且相等（如120px），不能是auto或百分比 -
shape-outside: circle(50%)——50%是相对于自身宽高的半径，不是父容器 -
border-radius: 50%—— 视觉上圆，非shape-outside必需，但用户预期一致 -
shape-margin: 12px—— 否则文字会紧贴边缘，可读性差
示例：
立即学习“前端免费学习笔记（深入）”；
.avatar {
float: left;
width: 120px;
height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
shape-margin: 12px;
margin-right: 16px;
}
移动端响应式下 shape-outside 容易错位
小屏缩放后，图片尺寸变了，但 circle(50%) 还按原始尺寸算，文字就糊进图里或掉到下方。这不是 bug，是设计使然 —— shape-outside 本身不响应式。
- 必须配合媒体查询重写整个
shape-outside声明，不能只改width - 小屏建议降级：
@media (max-width: 480px) { img { float: none; shape-outside: none; } } - 避免用
url()或长polygon()，iOS Safari 15.4 以下不支持path()，旧版解析易失败
别忘了 clip-path 同步控制图片显示区域
shape-outside 只影响文字流，不影响图片本身渲染。如果只设 shape-outside: circle(50%) 而没加 clip-path: circle(50%)，图片还是矩形框，视觉和逻辑就脱节了。
- 两者应成对出现：
shape-outside控制文字怎么绕，clip-path控制图片怎么显 - 不要用
clip-path: url(#svg)配合外部 SVG —— 跨域或协议限制（如file://）会导致空白 - 复杂轮廓优先导出 SVG
<path d="...">，再转为shape-outside: path("...")，但注意 Safari 对长字符串的容忍度低
真正难调的从来不是代码怎么写，而是浮动高度塌陷、断点间形状重算失准、以及 Safari 旧版静默失效却无提示 —— 这些地方最容易被忽略。
