shape-outside必须与float配合使用才生效，单独设置浏览器直接忽略；常见失效原因包括未显式声明float、元素为inline显示、宽高未固定、父容器创建bfc截断浮动上下文。

shape-outside 必须和 float 一起用，单独写它浏览器直接忽略——这不是 bug，是规范强制要求。

为什么写了 shape-outside 却没绕起来？

最常见原因不是语法错，而是浮动上下文根本没建立起来：

• float 没显式声明：float: none、float: unset 或压根没写 = 无效
• 元素仍是 display: inline：<img> 默认如此，底部有基线留白，建议加 display: block
• 宽高未定：仅靠 max-width: 100% 或 height: auto 不够；width 和 height 缺一不可，或用 aspect-ratio 锁定比例
• 父容器截断浮动：overflow: hidden、display: flex、display: grid、contain: layout 都会创建新 BFC，让形状“不可见”

shape-outside 值怎么选才稳？

日常图文混排中，这几个值实测兼容性好、不易崩：

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

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

下载

• shape-outside: circle(50% at 50% 50%)：配合 border-radius: 50% 实现圆形环绕，比纯裁图更可靠（避免透明边被误判）
• shape-outside: ellipse(60% 40% at 50% 50%)：适合横椭圆头像，at 控制中心点防偏移
• shape-outside: polygon(0 0, 100% 0, 100% 80%, 20% 80%, 20% 100%, 0 100%)：左下缺角效果，所有坐标用百分比，顶点顺序必须一致（顺时针或逆时针）
• shape-outside: url(#my-path)：优先内联 SVG，避免 CORS 和协议限制；外部 PNG 需 alpha ≥ 0.5 才计入轮廓

响应式下 polygon() 坐标总跑偏怎么办？

像素单位在缩放后失效，必须全部改用相对单位：

• 放弃 polygon(20px 50px, 180px 50px) 这类写法，改用 %、vmin 或 calc()
• 100% 指的是该浮动元素自身宽高，不是父容器尺寸；所以图片必须有稳定宽高比（靠 aspect-ratio 或 padding-bottom 技巧）
• 别写 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() 根本不解析
• 检测是否可用：typeof CSS.supports === 'function' && CSS.supports('shape-outside', 'circle()') 返回 false 就别硬上
• 真要用 url() 形状，SVG 必须内联在 HTML 中；file:// 协议或跨域 CDN 图片会失败

复杂点不在写法，而在「浮动上下文」是否真正成立——哪怕一个 overflow: hidden 套在父容器上，整个环绕逻辑就彻底中断。实际项目里，先确保 DevTools 的 Styles 面板里 shape-outside 没被划掉，再调形状。

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