float + shape-outside 可实现响应式文字环绕，但需手动适配断点、重写shape-outside声明，且兼容性差；文字未环绕主因是浮动元素不在文字容器内或触发BFC；小屏失效源于形状参数未随缩放更新，须用百分比值并配合宽高比控制。
float + shape-outside 能做响应式文字环绕，但必须手动适配断点，不能指望它自动缩放形状；小屏下不重置就大概率文字掉到图下面或糊进轮廓里。
为什么 float:left 后文字没绕上去？
这不是 float 失效，而是浏览器按规范只让**后续行内内容**绕浮动元素——如果图片不在文字容器内、或不是第一个子节点，文字根本“看不见”这个浮动机会。
- 检查 HTML：确保
<img>出现在<p>或<div>开头，且和文字同属一个父容器 - 避免给文字容器加
overflow: hidden或display: flow-root，它们会触发 BFC，把浮动“关在外面” - 图片必须设明确
width（推荐width: 300px或max-width: 100%+height: auto），否则尺寸塌陷，浮动区域算不准 - 别在 Flex/Grid 容器里混用
float，现代布局系统默认忽略浮动对子项的影响
shape-outside 在小屏为啥突然失效？
shape-outside 的值（比如 circle(50%)、polygon()）是基于元素当前盒模型计算的，而响应式缩放后图片宽高变了，但形状参数没变，路径就错位了。
- 现象包括：文字从右侧“跳”到图片正下方、iOS Safari 显示 “
shape-outside: ignored”、SVG 路径在 DPR 高的屏上偏移 - 必须在每个关键断点里重写整个
shape-outside声明，不能只改width—— 浏览器不会推导等效形状 - 优先用百分比（
circle(50% at 50% 50%)）、vmin或calc()，避开固定像素值 - 对
polygon()，所有坐标必须转为百分比，且图片需稳定宽高比（用aspect-ratio或padding-bottom技巧）
移动端要不要坚持用 shape-outside？
慎用。旧版 iOS Safari（15.x 及更早）、安卓 WebView（尤其微信内置浏览器）根本不支持 shape-outside，会静默降级为矩形环绕甚至完全失效；就算支持，窄屏下文字行宽骤减，可读性崩坏。
立即学习“前端免费学习笔记（深入）”；
- 检测是否可用：
typeof CSS.supports === 'function' && CSS.supports('shape-outside', 'circle()')返回false就别硬上 - 真要用
url()形状，SVG 必须内联在 HTML 中，file://协议或跨域 CDN 图片会失败 - 更健壮的做法：在
@media (max-width: 768px)中直接设float: none、shape-outside: none，让图片居中独占一行 - 若必须保留轮廓绕排，用
clip-path+margin模拟圆角头像类效果，兼容性好得多
清除浮动和响应式关闭的实操要点
浮动脱离文档流，不善后就会导致父容器塌陷、后续段落顶上来——这不是 bug，是规范行为；响应式关闭时漏掉某条样式，图文关系就断了。
- 清除塌陷最稳妥：父容器加
overflow: hidden（兼容 IE8+）或display: flow-root（语义清晰，Chrome 64+/Firefox 58+） - 别用
clear: both加在文字<p>上，它会强制整段换行，破坏环绕 - 小屏关闭环绕时，必须同步移除：
float、shape-outside、shape-margin，并重置margin（比如去掉margin-right） - 图片若带
<figcaption>，<figure>外层也要加overflow: hidden防塌陷
真正难调的不是语法，是浮动区域高度塌陷和响应式断点下的形状重算——比如小屏图片缩成 80px，但 circle(50%) 还按原始尺寸算，文字就糊进去了。这时候靠猜数值不如打开 Chrome DevTools 的 “Layout” 面板，勾选 “Show shape outlines”，拖拽实时看轮廓是否贴合。
