shape-outside必须与float:left/right同时使用才生效，缺一则被浏览器静默忽略；还需满足元素为块级、有明确宽高、父容器未创建BFC（如flex/grid/overflow:hidden）等条件。
shape-outside 本身不增强浮动，它只定义浮动元素周围文字流的绕行边界；没 float 就完全不生效，写了也白写。
为什么写了 shape-outside 却没反应？
不是语法错，是浮动上下文根本没建立：
-
float: left或float: right没显式写 ——float: none、继承值、或被后续规则覆盖，都等同于没设 - 元素仍是
display: inline（比如<img>默认状态），底部基线留白会干扰对齐，建议加display: block -
width和height缺一不可 —— 仅靠max-width: 100%或aspect-ratio（Safari 15.4+ 才支持）不够稳，polygon()坐标无锚点可依 - 父容器触发了新 BFC：含
overflow: hidden、contain: layout、display: flex或display: grid，浮动区域被“截断”，形状不可见
shape-outside: url() 引用 PNG/SVG 总回退成矩形
本地双击打开 HTML（file:// 协议）下，所有主流浏览器都会静默忽略 PNG 的 alpha 通道解析 —— 这不是你导出问题，是协议限制：
- 必须跑在 HTTP 服务上，例如终端执行
python3 -m http.server，且响应头含Access-Control-Allow-Origin: * - 优先改用内联 SVG：
shape-outside: url(#my-path)+ 页面底部<svg><defs><path id="my-path" d="M20,50 C30,20"></path></defs></svg>，彻底避开 CORS 和 alpha 解析问题 - PNG 必须带 Alpha 通道、边缘无半透明噪点；可试
shape-image-threshold: 0.4包含更柔和边缘，但可能引入毛边 - 务必同步加
clip-path裁剪图片本身，否则视觉上还是矩形框，仅文字绕形 —— 割裂感极强
shape-outside: polygon() 坐标总对不上
坐标系以该浮动元素自身左上角为原点，单位全部基于它当前的 width 和 height，不是父容器尺寸：
立即学习“前端免费学习笔记（深入）”；
- 单位必须统一：全用
%（适合响应式，但需确保宽高比稳定）或全用px（Firefox 对小数敏感，建议用整数如10px，别写10.5px） -
polygon(0 0, 100% 0, 100% 100%, 0 100%)还是矩形；要“缺角”，得把对应顶点往里缩，比如右下角从100% 100%改成80% 80% - 描点顺序必须闭合（顺时针或逆时针），漏一个点就路径断裂，行为不可预测
- 调试必加两行：
outline: 1px solid red看浮动盒真实范围，再叠一层background: rgba(0,0,0,0.1)验证描点是否贴合预期
移动端和响应式场景下怎么稳住效果？
图片缩放后，polygon(50px 50px, ) 这类绝对单位路径会严重错位，文字可能直接掉到图下方：
- 放弃纯像素值，改用
%、vmin或calc()，例如polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%) - 在媒体查询中必须重写整个
shape-outside声明，不能只改width；浏览器不会自动推导新尺寸下的等效路径 - iOS Safari 直到 16.4 才支持
shape-outside: path()；旧版（尤其企业内网常见 iOS 15.x）静默忽略；安卓 WebView 若卡在 Android 4.4 WebKit，path()根本不解析 - 实操中应主动降级：
shape-outside: ellipse(50% at 50% 50%)模拟圆角头像类图形；简单锯齿用polygon()替代
最易被忽略的复杂点：shape-outside 只影响文字流的外边界计算，不改变浮动元素自身渲染、不参与层叠、不修正 line-height —— 所有排版断裂，几乎都源于对这点的误判。
