shape-outside:circle 不生效的常见原因：未设置 float、父容器为 flex/grid、图片无固定宽高、未触发新 BFC；必须配合 float + 固定等宽高 + circle(50%) 才可靠生效。
shape-outside:circle 不生效的常见原因
直接写 shape-outside:circle() 几乎一定不生效，因为这个属性只对浮动元素（float: left 或 float: right）起作用，且该元素必须是**块级、有明确尺寸、且自身不被其他布局机制（如 flex/grid 容器）限制形状计算**。
- 图片没设
float——shape-outside彻底忽略 - 图片父容器用了
display: flex或display: grid—— 浮动被“降级”，形状失效 - 没给图片设宽高（比如只靠
max-width: 100%），circle()缺少参考半径，浏览器按 0 处理 - 文字内容在同一个 BFC 内但未触发新块格式化上下文（例如没清浮动），环绕可能错位或塌陷
必须配合 float 的最小可行写法
想让文字绕圆形图片走，核心就是：图浮起来 + 形状声明 + 文字正常流排布。以下是最简可靠组合：
<img src="avatar.jpg" class="circle-avatar"> <p>这里是环绕的文字内容……</p>
.circle-avatar 必须同时满足：
-
float: left（或right） -
width和height固定相等（如120px） -
border-radius: 50%（视觉圆，非 shape 必需但通常需要） -
shape-outside: circle(50%)（以盒模型中心为原点，半径为宽高一半） -
margin留出文字间距（否则紧贴边缘）
circle() 参数取值和实际效果差异
circle() 三个可选参数：circle(r at cx cy)，但日常用 circle(50%) 最稳。注意：
立即学习“前端免费学习笔记（深入）”；
-
circle(50%)表示半径 = 盒子宽高的一半，原点默认居中 → 真正对应视觉圆形 -
circle(60px)会强制半径 60px，若盒子是 100×100px，就变成偏大的圆，文字离图更远 -
circle(at 20px 30px)移动原点，但文字环绕路径会严重偏移，难对齐头像主体 - 百分比值基于**浮动元素自身的盒模型**，不是父容器，别误以为是相对页面宽度
IE/旧 Safari 兼容性现实与降级方案
shape-outside 在 IE 中完全不支持，iOS Safari 10.3+ 才开始支持，且早期版本对 circle() 解析不稳定。线上项目不能只靠它：
- 务必加
float基础布局（即使没shape-outside，至少能实现“图左文右”） - 用
@supports (shape-outside: circle())包裹增强样式，避免低版本解析错误 - 不要依赖环绕效果传递关键信息——比如人名、操作按钮被“绕到图后”就糟了
- 真要强兼容，可用 SVG
<clipPath>+float模拟，但成本高，多数场景不值得
最常被忽略的是：shape-outside 只影响**内联级内容的行框排列**，对绝对定位、transform 移动过的文字无效，也绕不过 overflow: hidden 的裁剪边界。
