float + shape-outside 是唯一能实现真正流式文字绕排的原生方案，需同时满足四条件：显式 float、明确宽高、父容器非 flex/grid、文字与图片同 BFC，缺一则退化为普通浮动。
能实现真正流式文字绕排（即文字自动流动、不靠 Flex/Grid 模拟）的，只有 float + shape-outside 这一套组合；其他方案要么是视觉模拟，要么破坏文档流或兼容性极差。
为什么 float + shape-outside 是唯一真流式方案
它让文字真实“感知”浮动元素的轮廓，并按该形状重排换行——不是靠容器分栏、也不是靠绝对定位硬塞位置。但必须同时满足四个条件，缺一就退化为普通浮动：
-
float: left或float: right必须显式声明（只写shape-outside会被忽略） - 浮动元素必须有明确的
width和height（max-width: 100%不够，尤其在响应式容器里易塌陷） - 父容器不能是
display: flex或display: grid，也不能设overflow: hidden（会创建新 BFC，切断文字与浮动的关联） - 文字内容必须和浮动元素处于同一 BFC 中，且 HTML 结构上紧邻其后（中间不能插
div等非流式块）
shape-outside 值怎么选才稳定不崩
日常使用中，这几个值实测最稳，避开了 Safari 对 path() 的支持延迟、也绕开了 PNG mask 的 CORS 和 alpha 判定问题：
-
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
注意：clip-path 只裁视觉，不影响文字绕排；shape-outside: url(mask.png) 在 file:// 协议下必失败，必须跑在 HTTP 服务上（比如 python3 -m http.server）。
立即学习“前端免费学习笔记（深入）”；
响应式下绕排突然失效？根源在尺寸基准错位
shape-outside 的值（如 circle(50%)）默认基于元素原始尺寸计算，不随 max-width: 100% 缩放自适应。小屏下图片缩了，但环绕半径还是按原图宽算——文字直接“跳”到图下方。
解决方法只有两个：
- 给小屏断点直接关闭绕排：
@media (max-width: 480px) { img { float: none; shape-outside: none; } } - 改用固定尺寸 + viewport 单位（如
width: 30vw），再配shape-outside: circle(15vw)，但需测试多设备渲染一致性
别被“现代布局”带偏：Flex/Grid 本质不是绕排方案
很多人用 display: grid 把图和文放在相邻列，看起来像绕排，但那是并列布局——文字不会从图下方继续流，也不会随图高动态换行。一旦图变高，文字不会“绕过去”，而是卡在固定格子里。
如果你需要的是图文混排+响应式+多段文字自然流动，就老老实实走 float 路线；如果只是静态对齐、图少文多、且不需要文字跨图换行，Grid/Flex 更可控。两者目标不同，不能混为一谈。
最容易被忽略的，是 shape-outside 在 DevTools 里显示 “ignored” 却不报错——它静默失效，你得手动开 Layout 面板勾选 “Show shape outlines” 才能看到轮廓到底画没画出来。
