float-start 必须与 shape-outside 同时使用，缺一不可；单独使用 float-start 为矩形环绕，单独使用 shape-outside 会被浏览器忽略，因其仅扩展浮动元素的文字流边界，无 float 则无上下文。
float-start 必须和 shape-outside 同时出现，缺一不可
只加 float-start 是矩形环绕，只加 shape-outside 会被浏览器静默忽略——DevTools 里该行直接划掉。这是因为 shape-outside 不是独立排版属性，它只扩展浮动元素的“文字流边界”，没有 float 就没有上下文。
实操建议：
-
float-start和shape-outside必须写在同一个<img>元素上，不能拆到父容器或伪类里 - Bootstrap 5 的
float-start已内置float: left，但不带display: block；而shape-outside要求元素是块级，所以得额外加class="d-block"或内联style="display: block" - 别用
img-fluid直接配shape-outside：它把宽高设为百分比，circle(50%)会因基准漂移而失准；固定宽度更稳，比如width: 120px
父容器不能触发 BFC，否则浮动被截断
加了 float-start 和 shape-outside 还没效果？大概率是图片的某个祖先元素悄悄开了 BFC（块级格式化上下文），把文字流隔在外面。浮动一旦被拦住，文字就只能从图下方开始排，形状再酷也没用。
常见拦截点：
- 父容器用了
display: flex或display: grid—— flex 容器完全无视float - 父容器有
overflow: hidden、overflow: auto或contain: layout—— 这些都会创建新 BFC - 图片和文字塞进了同一个
.row或.d-flex—— 别这么干，换用普通<div> 包裹 <li>父容器高度塌陷（比如只含浮动子项且没清浮动）—— 文字流失去锚点，浮动“悬空”</li> <h3>shape-outside 值选 circle() 还是 polygon()？看实际需求</h3> <p>日常图文混排，<code>circle(50% at 50% 50%)配合border-radius: 50%最省事；真要绕非对称轮廓（比如剪纸风插画），才值得上polygon()。但注意：所有坐标必须用百分比，像素值在不同 DPR 屏幕上会偏移。安全写法示例：
.avatar-wrap img { float: left; width: 120px; height: 120px; border-radius: 50%; shape-outside: circle(50% at 50% 50%); shape-margin: 1em; }-
shape-margin: 1em比me-3更可靠：它控制文字与形状边缘的距离，不受段落 margin 干扰 - 避免
url("mask.png")：本地开发用file://协议会静默失败；上线又得处理 CORS - 别用
path()：Safari 16.4+ 才稳定支持，且长字符串易解析失败
移动端必须降级，否则小屏文字可读性崩坏
iOS Safari 15.x 及更早、多数安卓 WebView（包括微信内置浏览器）完全忽略
shape-outside；就算支持，窄屏下浮动会导致文字行宽过窄，单字换行、断词生硬。推荐响应式策略：
- 小屏强制清除浮动：
@media (max-width: 768px) { .avatar-wrap img { float: none; display: block; margin: 0 auto; shape-outside: none; } } -
shape-margin用em或rem，不用px——小屏下固定像素间隙会太挤 - 媒体查询里不仅要改图片尺寸，还得重置
shape-outside声明；比如大屏用polygon()，小屏切回ellipse(40% 50% at 50% 50%)或直接none
真正难调的从来不是语法，而是每次改设计稿后，要手动校验图片在各断点下的实际像素宽、文字容器最小安全宽度。
-
