shape-outside对普通div默认无效，因其仅作用于浮动元素（float:left/right），且要求元素为块级、具明确尺寸与可见背景或图片，否则浏览器忽略该声明。
shape-outside 为什么对普通 div 默认无效？
直接给 div 设置 shape-outside 不会生效，因为该属性只对浮动元素（float: left 或 float: right）起作用，且要求元素本身是块级、有明确尺寸和背景（或图片）的容器。纯空 div 或未设置 float 的元素，浏览器直接忽略该声明。
- 必须搭配
float使用，缺一不可 - 元素需有实际内容、背景色或
clip-path可见轮廓，否则形状不可见也不参与排版 -
shape-outside影响的是**周边文字流**，不是自身内容；它定义的是文字绕行的“外边界”，不是裁剪自身
用 image/svg 实现可靠不规则环绕的实操要点
最稳定的方式是用带透明通道的 PNG 或内联 SVG 作为浮动元素的背景，再通过 shape-outside: url(...) 引用其 alpha 通道生成形状。浏览器会自动将透明像素视为“可绕行区域”。
- PNG 必须保存为带 Alpha 通道（非 GIF），且关键轮廓边缘无半透明噪点，否则绕行锯齿明显
- SVG 内联时推荐用
shape-outside: url(#my-polygon)指向<defs><polygon id="my-polygon" points="..."></polygon></defs>，避免跨域或加载失败 - 务必设置
width和height，否则浮动元素塌陷，文字直接从上方穿过
示例片段：
<div class="float-shape"></div>
<p>这段文字会绕着浮动图形排列……</p>
<p><style>
.float-shape {
float: left;
width: 200px;
height: 180px;
background: url(leaf.png) no-repeat center;
shape-outside: url(leaf.png); /<em> 浏览器读取 alpha 通道 </em>/
margin-right: 1em;
}
</style>用 polygon() 函数调试时容易踩的坐标坑
手写 shape-outside: polygon(...) 看似灵活，但坐标系默认以元素盒模型左上角为原点（0, 0），且单位必须是相对值（%）或绝对值（px），混用会导致偏移错乱。
立即学习“前端免费学习笔记（深入）”；
- 所有点坐标按顺时针或逆时针闭合书写，首尾不必重复；漏掉一个点就变成开放路径，行为不可预测
- 用
%时，100%指元素自身的宽/高，不是父容器——这点常被误判 - 调试建议：先加
outline: 1px solid red显示盒模型边界，再叠加shape-outside对比文字流变化 - 注意
margin不参与shape-outside计算，但会影响浮动元素位置，间接改变绕行效果
Firefox 和 Safari 对 shape-margin 的兼容差异
shape-margin 用于在形状外扩出一段空白间距，让文字离图形更远。但它在 Firefox 中仅支持数值（10px），不支持百分比；Safari 则两者都支持。Chrome 全面支持，但旧版（≤90）对负值处理异常。
- 若需统一效果，优先用
px单位，避免shape-margin: 5%在 Firefox 中失效 -
shape-margin不会扩大浮动元素尺寸，只是逻辑外扩——文字流避开的是“形状 + margin”合成区域 - 和
box-shadow不同，它不影响绘制，只影响布局流，所以无法用 DevTools 直接“看到”这个 margin 区域
真正麻烦的不是写法，而是形状源（尤其是 PNG）的边缘精度和浮动元素的尺寸控制——这两处稍有偏差，文字就会卡在不该卡的位置，反复调 width/height 和 margin 比写 polygon 坐标还花时间。
