shape-outside本身不改变盒模型，仅定义文字环绕边界；生效前提为元素必须设float:left/right、有明确宽高、父容器不能含overflow:hidden或flex/grid等截断浮动上下文。
shape-outside 本身不改变盒模型，只定义文字流动的边界；真正生效的前提是元素必须浮动、有明确尺寸、且父容器不截断浮动上下文。
为什么写了 shape-outside 却没反应
不是语法写错了，而是浏览器直接忽略该声明——常见失效链如下：
-
float缺失：必须显式设float: left或float: right，display: inline元素（如默认img）即使加了shape-outside也无效 - 尺寸未固定：
width和height都得有值（或用aspect-ratio+width锁定），否则circle(50%)、polygon()等函数无基准可算 - 父容器干扰：父级若含
overflow: hidden、contain: layout或display: flex/grid，会剪裁浮动区域，导致形状“不可见” - 文字不在普通流中：环绕内容要是
display: block的段落，不能是flex或grid容器的子项
shape-outside: polygon() 坐标怎么写才不出错
所有坐标都基于该浮动元素自身的宽高，不是视口或父容器。单位混用、起点顺序错、比例失准，都会让形状完全偏移：
- 统一用
%：适合响应式，但要确保图片宽高比稳定（比如加aspect-ratio: 1/1），否则polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)在拉伸后就变形 - 统一用
px：适合固定尺寸场景，Firefox 对小数敏感，建议全用整数（如10px而非10.5px） - 别写
polygon(0 0, 100% 0, 100% 100%, 0 100%)——这仍是矩形；要实现“缺角”，得把对应顶点往内缩，比如右下角从100% 100%改成80% 80% - 调试时加
outline: 1px solid red看浮动元素真实范围，再叠一层半透背景验证描点是否贴合预期
移动端适配时 shape-outside 容易崩在哪
响应式图片缩放后，shape-outside 的参数没跟着变，文字就绕到屏幕外或直接掉到图下方：
立即学习“前端免费学习笔记（深入）”；
-
circle(100px)在小屏上还是按 100px 算，但图片可能只剩 60px 宽 → 文字环绕区域远大于图片本身 -
url(logo.png)的透明轮廓在小屏被压缩，边缘毛刺、断裂，甚至 Safari 解析失败（尤其 path 字符串超 500 字符） - 用
%写polygon()时，100% 指的是当前图片尺寸，不是容器宽度，极易失准 - 解决方案只有两个：用媒体查询重写整个
shape-outside声明（不能只改width），或降级为shape-outside: margin-box+clip-path: inset()模拟简单绕排
shape-margin 和 margin 到底差在哪
shape-margin 不是 margin 的别名，它只控制文字内容到 shape-outside 轮廓的最小距离，不影响元素自身布局位置：
-
shape-margin: 12px表示文字沿形状外扩 12px 的缓冲带流动，不是把图片整体推远 - 若同时设了
margin-right: 30px和shape-margin: 20px，文字离形状轮廓是 20px，但离浮动元素右边框是 50px -
shape-margin不支持%，值可用px、em、rem；动态排版建议用em，避免字体缩放后文字贴太近 -
padding和border对shape-outside无影响——它们不参与形状计算；想模拟“内填充感”，得靠inset()或 SVG 路径偏移
最常被忽略的一点：shape-outside 的路径坐标永远绑定在浮动元素自身的盒模型上，哪怕你用 vw 或 calc() 计算，最终也是映射回这个盒子的宽高。所以调形状前，先盯死它的 width、height、aspect-ratio 是否可控。
