shape-outside 仅在 float 元素上生效，必须配合 float: left/right 使用；其他布局方式下被忽略，且需确保元素有明确宽高、display: block 及父容器不截断浮动传播。

shape-outside 不是定位技术，它不移动元素、不改变盒模型、也不参与层叠上下文——它只告诉浏览器：「这块浮动区域的文字流，该绕着哪条线走」。想靠 position: absolute 或 transform 实现文字环绕，结果只会是文字堆叠或错位，根本绕不起来。

为什么 float + shape-outside 是唯一可行路径

浏览器对文字环绕的计算逻辑只存在于浮动上下文中。CSS Shapes 规范明确限定：shape-outside 必须配合 float: left 或 float: right 才会被解析；其他任何布局方式（display: flex、display: grid、position: relative/absolute）下，该属性直接被忽略，DevTools 里显示为划掉或 none。

写了 shape-outside 却没反应？先查这四点

常见错误现象：DevTools 中 shape-outside 被划掉，文字整段塌陷到图片正下方。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• float 没显式声明：不是继承值，也不是父级设置的；float: none 或未写 = 无效
• 元素仍是 display: inline：<img> 默认如此，底部有留白，建议加 display: block 避免基线干扰
• 宽高未定：仅靠 max-width: 100% 或 aspect-ratio（Safari 15.4+ 才支持）不够稳定；width 和 height 缺一不可
• 父容器截断浮动传播：含 overflow: hidden、contain: layout、display: flex 或 display: grid 会创建新 BFC，形状“不可见”

响应式下 polygon() 坐标错位怎么稳住

桌面端描好的 polygon(20px 50px, 180px 50px) 到手机上全跑偏，是因为像素单位不随缩放变化。

• 放弃 px，全部改用 %：坐标基于图片自身宽高，只要宽高比稳定（靠 aspect-ratio 或固定 width/height），百分比就能随缩放自适应
• 别写 polygon(0 0, 100% 0, 100% 100%, 0 100%)——这还是矩形；要“缺角”，就把对应点往里缩，比如右下角从 100% 100% 改成 80% 80%
• 调试时必加两行：outline: 1px solid red 看浮动盒子真实范围，再叠一层 background: rgba(0,0,0,0.1) 验证描点是否贴合预期

iOS Safari 和安卓 WebView 的硬限制

移动端兼容性最易被忽略的硬限制：

• iOS Safari 直到 16.4 才支持 shape-outside: path()；旧版（尤其企业内网设备常见 iOS 15.x）会静默忽略
• 安卓 WebView 基于 Chromium 内核，Chrome 80+ 支持，但 Cordova 或某些小程序内核可能卡在 Android 4.4 的 WebKit，path() 根本不解析
• 实操中应主动降级：shape-outside: ellipse(50% at 50% 50%) 模拟圆角头像类图形；简单锯齿用 polygon(0% 0%, 100% 0%, 100% 70%, 70% 100%, 0% 100%)（注意顺时针顺序）
• 真要用 PNG 透明轮廓？导出 SVG <clippath></clippath>，提取 d 值后写进 shape-outside: path("M...")，但字符串长度别超 500 字符，否则 Safari 16.4 也会解析失败

复杂点不在写法，在传播链：图片加载完成前设样式 → 浏览器跳过计算；服务端返回 width="100%" → 尺寸未定 → 形状被静默丢弃；SVG <clippath></clippath> 放在编辑器容器内 → 用户删段落时误删 → 形状失效。每个环节断了，效果就归零。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！