移动端慎用 shape-outside 因兼容性差（旧版 ios/安卓 webview 不支持）且 float 在窄屏导致文字行宽过窄、可读性差；应优先响应式断开浮动或用 inline-block 模拟并置。
移动端文字环绕图片不能直接套用桌面端 float + shape-outside 写法，因为多数安卓 WebView 和旧版 iOS Safari 不支持 shape-outside，且浮动在小屏幕易导致文字挤成窄列、可读性崩坏。
为什么移动端慎用 shape-outside
Chrome for Android（v120+）、Safari 16.4+ 才开始稳定支持 shape-outside，但大量用户仍在使用 iOS 15.x 或安卓系统自带 WebView（如微信内置浏览器），这些环境会直接忽略该属性，降级为矩形环绕甚至完全失效。更关键的是：shape-outside 必须配合 float，而 float 在窄屏下会让文字行宽骤减，出现单字换行、断词生硬等问题——这不是效果没出来，是排版逻辑本身已不适用。
- 检查当前环境是否支持：可在控制台运行
typeof CSS.supports === 'function' && CSS.supports('shape-outside', 'circle()')，返回false即不可用 - 即使支持，
url()形状需图片启用 CORS，CDN 图片常因跨域被静默降级为矩形 -
polygon()坐标若用 px 单位，在不同 DPR 屏幕上会偏移，必须改用百分比或vw
float: left 在移动端的基本可用条件
如果只要求矩形环绕（非轮廓贴合），且能接受有限兼容性，float 仍可工作，但必须满足三个硬性前提：
- 图片 HTML 必须出现在文字内容之前，且是父容器第一个子节点——
<p><img>文字</p>可行，<p>文字<img></p>必然失败 - 图片必须设明确
width（推荐用max-width: 100%+height: auto），否则在 viewport 缩小时会撑破容器 - 文字容器（如
<p></p>）不能触发 BFC，即禁止overflow: hidden、display: flow-root等，否则浮动元素被“关进盒子”，文字不环绕
响应式中安全关闭环绕的写法
真正健壮的做法，是在小屏幕主动放弃环绕，让图片独占一行——这比勉强维持一个难读的窄列更符合移动端阅读习惯。用媒体查询切断浮动即可：
@media (max-width: 768px) {
.article img {
float: none;
margin: 0 auto;
display: block;
max-width: 100%;
}
.article p {
margin-top: 12px;
}
}
注意：不要只写 float: none 就完事。必须同时重置 margin（浮动时的 margin-right 在取消后会残留空白），并显式设 display: block 防止图片作为 inline 元素产生基线间隙。
替代方案：用 inline-block 模拟轻量环绕
如果必须在窄屏保留图文并置感（非严格环绕），可用 inline-block + 垂直对齐，规避浮动所有副作用：
.img-inline {
display: inline-block;
vertical-align: top;
width: 30%;
margin-right: 12px;
}
.article-content {
display: inline-block;
width: 65%;
vertical-align: top;
}
这种写法不依赖浮动、无清除问题、全平台兼容，且能精确控制图文比例。缺点是无法实现“文字从图片底部继续流下”的自然环绕，但对大多数移动端文章页，视觉差异极小，稳定性高得多。
最易被忽略的一点：无论用哪种方案，<img> 的 alt 文本和 DOM 顺序必须与语义流一致。屏幕阅读器按 HTML 顺序朗读，如果图片在代码里被 float 到右侧，但逻辑上它是段落的补充说明，就该保留在文字之前——视觉位置和语义位置不能错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
