shape-outside必须与float配合使用才生效，单独声明会被浏览器忽略；它仅作用于浮动块级元素，常见失效原因包括未设float、display非block、父容器触发BFC或内容脱离文档流。
shape-outside 必须和 float 同时存在才起作用
单独写 shape-outside: circle(50%) 不会生效，浏览器直接忽略该声明，也不报错。它只对处于浮动上下文中的块级元素起作用。
常见失效场景包括：
-
float没设，或设成了float: none - 图片是
display: inline（比如被父容器重置了显示模式），需显式加display: block - 父容器用了
overflow: hidden、display: flow-root或contain: layout，触发新 BFC，把文字流隔在外面 - 文字内容不在普通文档流里，比如包裹在
display: flex或display: grid容器中
shape-outside 值怎么选才不白写
值不是随便填的，得匹配使用场景和兼容性要求：
-
shape-outside: circle(50%)：配合border-radius: 50%最稳，比裁圆图更可靠；注意小屏下若图片缩放，得用媒体查询重设，否则半径仍按原始宽高算 -
shape-outside: ellipse(60% 40% at 50% 50%)：at控制中心点，避免头像偏移；别漏写at，否则默认在左上角 -
shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)：所有坐标必须基于该元素自身宽高，统一用%才能响应式；写成px在缩放后会严重错位 -
shape-outside: url(#my-path)：优先内联 SVG，无跨域问题，路径可精确控制；url(logo.png)在file://协议下必失败，必须走 HTTP 服务
shape-margin 和 shape-image-threshold 的实际影响
shape-margin 是文字与形状边界的呼吸区，不影响图片定位，但直接影响可读性：
立即学习“前端免费学习笔记（深入）”；
- 设
shape-margin: 12px后，文字整体外扩一圈，比单纯给图片加margin更可控 - 对
url()形状，shape-image-threshold: 0.4可让半透边缘也参与轮廓生成（默认是0.5），适合毛边或阴影图 - 别和
padding混用——padding改变盒模型尺寸，可能间接干扰polygon()坐标锚点
响应式断点下 shape-outside 容易翻车的地方
形状参数不会随图片缩放自动重算，这是最常被忽略的坑：
- 小屏下图片变成
width: 80px，但circle(50%)还按原始 200px 算半径，文字就糊进图里了 - 必须在每个关键断点里重写整个
shape-outside声明，不能只改width；浏览器不推导等效路径 - 用
vmin或calc()替代固定像素值，例如circle(calc(50vw - 20px))，但要注意 Firefox 对 calc 内浮点支持不稳定 - 极端情况（如超窄屏）建议直接用媒体查询关掉：
@media (max-width: 480px) { img { shape-outside: none; } }
真正难调的从来不是语法，而是浮动区域高度塌陷 + 断点下形状重算不同步。调试时打开 Chrome DevTools 的 “Layout” 面板，勾选 “Show shape outlines”，一眼就能看出轮廓画在哪——没显示，八成是 float 缺失或 BFC 隔离了。
