float + shape-outside 是唯一原生流式文字环绕方案，但必须同时满足四条件：显式 float、明确宽高、父容器非 flex/grid、文字与图片同 bfc，缺一则失效。
float + shape-outside 是目前唯一能实现真正流式文字环绕（非并列、非 Flex/Grid 模拟）的原生方案，但必须同时满足四个硬性条件，缺一不可；否则浏览器直接忽略 shape-outside，DevTools 里会显示 “shape-outside: ignored”。
为什么写了 shape-outside 却完全没反应
最常见失效路径是只设形状、不设浮动：shape-outside 不触发浮动，它只是修饰已浮动元素的绕排轮廓。漏掉 float: left 或 float: right，浏览器就当这行 CSS 不存在。
- 父容器设置了
overflow: hidden、display: flex或display: grid：会创建新 BFC，把浮动区域“截断”，文字根本绕不进去 -
没有明确宽高，只靠
max-width: 100%和height: auto：加载中占位塌陷，shape-outside计算基准丢失，重排后文字错位 - 本地双击打开 HTML（
file://协议）下用shape-outside: url(mask.png)：因 CORS 限制必然失败，必须跑在 HTTP 服务上（如python3 -m http.server） - 调试时可临时加
outline: 1px solid red看图片真实盒模型，再用 Chrome DevTools 的 “Layout” 面板勾选 “Show shape outlines” 查看轮廓是否渲染
shape-outside 值怎么选才稳定实用
日常图文混排中，这几个值实测兼容性好、不易崩：
-
shape-outside: circle(50% at 50% 50%)：配合border-radius: 50%实现圆形环绕，比纯裁图更可靠（避免透明边被误判） -
shape-outside: ellipse(60% 40% at 50% 50%)：适合横椭圆头像，at控制中心点，防偏移 -
shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)：左下缺角效果，所有坐标用百分比，且顶点顺序不能错（顺时针或逆时针需一致） -
shape-outside: url(mask.svg)：必须确保 SVG 返回Content-Type: image/svg+xml，内联写法更稳；外部 PNG 需 alpha ≥ 0.5 才计入轮廓
注意：clip-path 不影响文字环绕，只有 shape-outside 管这事；path() 虽灵活但 Safari 16.4+ 才支持，字符串超 500 字符易静默降级。
响应式下 shape-outside 为什么会突然失效
因为它的值（circle()、polygon()、url()）默认基于图片原始尺寸计算，不随视口缩放自动调整。图片用 max-width: 100% 缩小后，circle(50%) 仍按原始宽度算半径——结果就是文字“跳”到图片正下方，尤其 iOS Safari 明显。
- 小屏（如
@media (max-width: 480px)）建议直接关闭环绕：float: none+shape-outside: none，改用display: block; margin: 0 auto - 若保留环绕，必须在每个断点里重写整个
shape-outside声明，不能只改width；浏览器不会推导新尺寸下的等效形状 -
shape-margin得用em或rem，不用固定px，否则小屏间隙过窄影响可读性 - 别用
contain: layout或content-visibility: auto——这两个属性会让shape-outside计算错位甚至截断文字
最容易被忽略的硬性前提
四个条件必须同时满足，少一个就彻底不生效：
-
float: left或float: right必须显式声明在上（
position: absolute或display: inline-block不行） - 图片必须有明确的
width和height（哪怕用aspect-ratio: 4/3+width: 100%控制），不能只靠max-width: 100%和height: auto - 父容器不能是
display: flex或display: grid（会抑制浮动行为，导致形状计算被跳过） - 文字内容需处于同一块格式化上下文（BFC）中；若父容器设了
overflow: hidden，得确认它没意外裁剪内容
真正难的不是写出这十几行 CSS，而是每次改设计稿后，得手动校验图片在各断点下的物理宽度、文字容器最小安全宽度、以及 shape-margin 在不同字体大小下的视觉等效值——这些没法靠工具自动推导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
