shape-outside必须配合float:left/right才能生效，且元素需满足四条件：显式浮动、块级显示、明确宽高、父容器不触发BFC；否则浏览器直接忽略该属性。
Float 本身不支持“创意不规则排版”——它只按行、从左或右依次贴靠，行为高度可预测。真要实现视觉上不规则的卡片流、瀑布流或错落图文，必须放弃纯 float，改用其他机制或封装模拟逻辑。
float:left/right 只能产生线性堆叠，不是“不规则”
所谓“不规则”，比如淘宝首页商品卡片高度不一、ZAKER 新闻卡片错落有致、文字绕多边形轮廓——这些都不是 float 的原生能力。float 的排布规则非常机械：
-
float: left的元素会尽可能贴着上一行最右元素的右边，或父容器左边；没空间就换行 - 所有浮动元素共享同一套“当前行剩余宽度”判断逻辑，无法跳过某列、无法回填空隙、无法跨行对齐
- 没有“自动寻找最低高度列插入”这类行为——那是
Masonry布局的核心逻辑，和 float 无关
为什么有人误以为 float 能做不规则布局？
早期前端在缺乏 Flexbox/Grid 时，用 JavaScript 模拟了“浮动式流式布局”，比如：
- 遍历子元素，维护一个列高数组（如
[200, 180, 220]） - 每次取高度最小的列，把新元素
position: absolute放进去，并更新该列高度 - 对外宣称“这是浮动布局”，其实是借用了 float 的“视觉错落感”描述，而非技术实现
这种方案和 float 属性本身无关，CSS 中写 float: left 不会触发任何列高计算。
立即学习“前端免费学习笔记（深入）”；
shape-outside + float 是唯一合法的“不规则”组合，但限制极多
如果你真想让文字绕非矩形形状（比如云朵、手写字路径），float 是前提，但必须配 shape-outside：
- 元素必须同时满足：
float: left或right、有明确width和height、display不能是inline -
shape-outside: polygon(0 0, 100% 0, 100% 70%, 60% 70%, 60% 100%, 0 100%)才能切出右下缺角；写成100% 100%还是矩形 -
shape-margin: 12px控制文字到轮廓的距离，不是 margin，不推其他元素 - Safari iOS 16.0 及更早完全不支持
polygon()和url()，降级必须用@supports (shape-outside: circle())包裹
现代替代方案比 float 更可靠
真要实现不规则视觉效果，优先选这些：
- 瀑布流：用 CSS
column-count+break-inside: avoid（兼容性好，但列宽固定） - Masonry 布局：Chrome 103+ 支持
grid-template-rows: masonry，Firefox 需-moz-masonry - 图文绕不规则图：用
clip-path配合float做视觉裁剪，再用shape-outside控制文字流（注意 Safari 兼容断层） - iOS 上尤其注意：Webkit 对
shape-outside的支持滞后，float本身在 flex 容器里会被忽略，别在display: flex父元素里还写float
float 的“不规则”全是错觉——它的行为太确定，反而成了限制。真正难的不是怎么用 float 实现，而是怎么识别哪些需求它根本做不到，及时切换方案。
