float + shape-outside 是目前唯一能实现真正文字流式环绕的原生 CSS 方案，但需在各断点手动重置 shape-outside 值，否则小屏下文字易掉至图片下方或错位；其失效主因是 shape-outside 基于浮动元素原始尺寸计算，不随响应式缩放自适应。
直接说结论：float + shape-outside 是目前唯一能实现真正文字流式环绕（非并列）的原生 CSS 方案，但必须手动响应式重置 shape-outside 值，否则小屏下文字大概率掉到图片下方或错位。
为什么 shape-outside 在手机上突然失效
shape-outside 的值（比如 circle(50%)、polygon()、url()）默认基于浮动元素自身的盒模型尺寸计算，不随视口缩放自动调整。当图片用 max-width: 100% 响应式缩小时，它的实际宽高变了，但 circle(50%) 仍按原始尺寸算半径——结果就是文字环绕区域严重偏移。
常见现象包括：
- iOS Safari 下文字“跳”到图片正下方，且不再返回右侧
- 用
url(mask.svg)时，小屏下透明轮廓被压缩变形，边缘毛刺或断裂 - 多边形坐标写成
polygon(0 0, 100% 0, ...)，其中的100%指的是图片自身宽高，不是容器，图片一缩，路径就全歪
必须同时满足的四个硬性条件
缺一不可，否则 shape-outside 彻底不生效：
立即学习“前端免费学习笔记（深入）”；
-
float: left或float: right必须显式声明在图片上（position: absolute或display: inline-block不行） - 图片必须有明确的
width和height（哪怕用aspect-ratio+width: 100%控制），不能只靠max-width: 100%和height: auto - 父容器不能是
display: flex或display: grid（会抑制浮动行为，导致形状计算被跳过） - 文字内容需处于同一块格式化上下文（BFC）中；若父容器设了
overflow: hidden，得确认它没意外裁剪内容
如何让 shape-outside 真正响应式
核心不是“让它自动适配”，而是**在每个关键断点里重写整个 shape-outside 声明**——浏览器不会推导新尺寸下的等效形状。
- 优先用相对单位：
circle(50% at 50% 50%)比circle(80px)更稳，因为百分比始终按当前盒模型算 - 对
polygon()，所有坐标必须转为百分比，并确保图片宽高比稳定（用aspect-ratio: 4/3或padding-bottom技巧） - 小屏（如
@media (max-width: 480px)）建议直接关闭环绕：shape-outside: none+float: none，改用display: block; margin: 0 auto;让图片独占一行 - 别试图用
contain: layout或content-visibility: auto优化它——这两个属性会让shape-outside计算错位甚至截断文字
最容易被忽略的性能与兼容性现实
复杂 shape-outside（尤其是高精度 polygon() 或 url() 路径）会在滚动长文首屏时触发频繁重排（layout thrashing），文字位置可能“跳动”。Safari 15.4+、Chrome 107+、Firefox 119+ 才稳定支持；旧版本直接退化为矩形环绕，不报错也不提示。
真正难调的从来不是语法，而是浮动区域高度塌陷 + 断点切换时形状重算失准——比如图片缩到 80px 后，circle(50%) 还按 200px 宽度算，文字就糊进图里去了。这时候光靠 CSS 已不够，得配合媒体查询重置，或者干脆在小屏切回基础 float + margin 矩形环绕。
