shape-outside必须与float:left/right同时使用才生效，单独设置无效；最常见失效原因是未声明float，或父容器触发BFC（如overflow:hidden）阻断文字流，调试可启用Chrome Layout面板查看形状轮廓。
必须同时用 float 和 shape-outside，缺一不可；只设 shape-outside 不会生效。
为什么 shape-outside 没反应？
最常见原因是图片没加 float: left 或 float: right。这个属性只对浮动元素起作用，不是“给任意图片加个形状就能绕”。
另一个高频干扰是父容器触发了新的 BFC（比如设置了 overflow: hidden、display: flow-root），把文字流硬生生隔在了外面，导致环绕区域根本没参与排版计算。
调试时可临时删掉父容器所有样式，或用 Chrome DevTools 的 “Layout” 面板勾选 “Show shape outlines”，直接看环绕路径是否渲染出来。
shape-outside 值怎么选才实用？
日常图文混排中，这几个值最稳妥：
-
shape-outside: circle(50%)：配合border-radius: 50%实现真正圆形环绕，比单纯裁圆图更可靠（避免透明边被误判） -
shape-outside: ellipse(60% 40% at 50% 50%)：适合横椭圆头像，at控制中心点，避免偏移 -
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%)：看起来和默认矩形一样，但加上shape-margin: 12px后，文字会整体外扩一圈，比纯靠margin更可控 -
shape-outside: url(mask.svg)：必须确保 SVG 文件返回Content-Type: image/svg+xml，且无跨域限制；本地开发时用file://协议会直接失败
浮动 + 形状组合的坑在哪？
浮动本身就有兼容性包袱，而 shape-outside 在 Safari 15.4+、Chrome 107+、Firefox 119+ 才稳定支持——旧版本会退化为矩形环绕，不报错也不提示。
性能上，复杂 polygon() 或高精度 SVG 路径会显著拖慢重排（layout），尤其在长文章首屏滚动时，文字位置可能“跳动”。
别试图用 contain: layout 或 content-visibility: auto 来优化它：这两个属性完全不参与文字流计算，加了反而让 shape-outside 计算错位，甚至导致文字突然截断。
真正难调的不是语法，而是浮动区域高度塌陷和响应式断点下的形状重算——比如小屏下图片缩成 80px，但 circle(50%) 还按原始尺寸算，文字就糊到图里去了。这时候得配合媒体查询重置 shape-outside，或者干脆在小屏切回纯 float + margin 矩形环绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
