CSS中float属性与Shape-outside配合实现异形排版原理？

shape-outside 仅作用于已浮动的块级替换元素且需明确尺寸：必须同时满足 float:left/right、块级替换元素（如带float的img或display:block+content:url()的div）、可计算宽高三个条件，缺一则静默失效。

shape-outside 本身不触发浮动，只重定义文字流边界

写了 shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%) 却没反应？不是语法错，而是浏览器压根没启用它——shape-outside 只修饰**已浮动元素**的文字环绕路径，不负责让元素浮动，也不改变盒模型、不触发重排。它干的事很窄：告诉浏览器“这个已经 float: left 的盒子，文字别按矩形绕，按我给的多边形绕”。没 float，就等于没开开关，DevTools 里直接标 shape-outside: ignored。

必须同时满足 float + 块级替换元素 + 明确尺寸

三个条件缺一不可，漏一个就静默失效：

• float: left 或 float: right 必须显式声明；float: none、未设、或被父容器（如 display: flex）覆盖，效果归零
• 元素得是块级替换元素：<img> 加了 float 后自动块化；纯 <div> 得配 display: block + content: url(...) 伪元素，否则不是“替换元素”，shape-outside 不认
• 宽高必须可计算：不能只靠 max-width: 100%；circle(50%) 和 polygon() 全部基于元素自身 width/height 基准，没值就无从算起；aspect-ratio 可替代固定 height，但需配合明确 width

shape-outside 路径与视觉呈现完全解耦

你看到的图片可能被 clip-path 剪成云朵，但文字仍绕着 shape-outside 定义的圆形走——两者互不感知。常见误操作：

• 用 shape-outside: url(logo.png) 但没确保 PNG alpha 通道干净（毛边/抗锯齿像素低于 shape-image-threshold: 0.5 默认阈值），结果文字绕了个模糊轮廓
• SVG 内联后写 shape-outside: url(#myPath)，但 ID 大小写错、含空格、或 <path> 坐标超出元素尺寸范围，静默失败
• 对 SVG 元素加 transform: scale(0.8)，shape-outside 读的是原始 d 值，不是缩放后位置，导致文字绕偏

移动端和编辑器里最容易踩的硬伤

不是代码不行，是环境卡死：

立即学习“前端免费学习笔记（深入）”；

• 本地双击打开 HTML（file:// 协议）下，shape-outside: url(logo.png) 必然因 CORS 拒绝加载，必须跑在 HTTP 服务上（如 python3 -m http.server）
• 富文本编辑器中动态插入图片时，JS 只加 shape-outside 却漏掉 float，或图片 onload 前就读取 offsetWidth（为 0），导致形状计算被跳过
• iOS Safari 16.4 以下不支持 path() 函数，复杂路径直接回退为矩形，且无任何报错提示
• 响应式场景下，polygon() 用 % 单位时，小屏缩放后顶点坐标按新尺寸重算，原设计的“右下缺角”可能变成“左上穿孔”，得靠媒体查询重置或改用 px 固定尺寸

真正难调的从来不是怎么写 shape-outside，而是浮动区域是否被父容器裁剪、尺寸是否稳定、路径是否与视觉一致——这些细节不验证，写再漂亮的 polygon() 也白搭。