CSS Shapes 是通过 shape-outside 让文字绕不规则图形排版的特性，但仅对浮动元素生效，且需配合 float 使用；Chrome/Firefox/Edge 17+ 支持，Safari 15.4 才支持 path()，IE 完全不支持。
什么是CSS Shapes，它为什么不能直接用
CSS Shapes（比如 shape-outside）能让文字真正绕着不规则图形（如圆形、多边形、SVG路径）排版，但它的支持度很现实：Chrome/Firefox/Edge 17+ 支持，Safari 一直拖到 15.4 才支持 shape-outside: path()，而 IE 完全没戏。更关键的是，它**只对浮动元素生效**——不是随便一个 div 加个 shape-outside 就能绕，必须配合 float: left 或 float: right，否则样式被忽略且无任何提示。
如何让文字环绕同时 fallback 到纯浮动布局
核心思路是：先写带 shape-outside 的浮动结构，再用特性检测或简单 CSS 覆盖做降级。不要依赖 JavaScript 检测，因为文字流重排会闪动；纯 CSS 更稳。
- 始终把浮动元素放在文字内容之前（DOM 顺序），否则
shape-outside不触发 - 给浮动元素显式设
width和height，否则shape-outside可能计算为 0 - 降级方案就是：在不支持
shape-outside的浏览器里，让它退回到矩形浮动——这本来就是默认行为，无需额外代码 - 若想进一步优化旧浏览器体验（比如让图片边缘更柔和），可加
clip-path作视觉补充，但它不影响文字环绕逻辑
示例结构：
@@##@@ <p>这段文字会绕着图片走……</p>
CSS：
.shape-float {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
shape-margin: 1em;
}
<p>@supports not (shape-outside: circle()) {
.shape-float {
shape-outside: none; /<em> 显式清除，避免某些 UA 缓存旧解析 </em>/
}
}</p>
常见踩坑：文字不绕、绕错方向、或出现空白断层
这些问题几乎都源于浮动上下文和文档流的耦合关系被破坏：
-
shape-outside只影响**后续兄弟行内内容**，如果浮动元素后面是display: block元素（比如另一个p或div），那后面的块会“顶开”文字流，造成视觉断层 - 父容器设了
overflow: hidden或auto，可能剪掉浮动区域，导致shape-outside计算范围异常 - 用了
margin或transform移动浮动元素位置，但shape-outside仍按原始盒模型计算——想移形换位，得用clip-path配合，而不是靠位移 - Safari 15.3 及更早版本中，
shape-outside: url(#svg-path)会完全失效，必须用内联path()或降级为circle()/inset()
要不要用 shape-margin？怎么设才不翻车
shape-margin 是控制文字和形状轮廓之间的间隙，但它不是「安全区」，而是**真实参与 BFC 布局计算的偏移量**。设太大，文字会被推远甚至换行；设为负值，在多数浏览器里会被忽略（仅 Firefox 支持负 shape-margin）。
- 推荐用
em或rem，和字体流保持比例一致 - 避免和
margin混用：如果浮动元素本身有margin-right: 1em，再设shape-margin: 1em，实际间隙≈2em，容易撑开太多 - 调试时临时加
outline: 1px solid red到浮动元素上，能看清形状轮廓是否如预期渲染
真正难处理的是响应式场景：当图片缩放时，shape-outside: circle(50%) 依然有效，但 shape-outside: path("M0,0 h100 v100 z") 这种绝对坐标会失真——此时必须用 viewBox 配合 SVG 内联，或改用相对单位 path("M0,0 h100v100z") 并确保 SVG 本身是 responsive 的。
兼容性不是非黑即白的事，shape-outside 的降级天然存在，但形状精度、路径动态性、以及 Safari 对 SVG 引用的保守策略，才是真正卡住落地的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
