原生 wrap-flow 基本不可用，真正能落地的是 shape-outside + float 组合；wrap-flow 因浏览器支持极差且规范已废弃而被忽略，shape-outside 则需满足浮动、块级、有宽高三条件才能实现图文绕排。
原生 wrap-flow 基本不可用，别白费时间配它；真正能落地的是 shape-outside + float 组合，配合 clip-path 或图片 alpha 通道控制形状边界。
为什么 wrap-flow 不能直接用
这个属性虽在 CSS Exclusion 规范里定义，但实际浏览器支持极差：Chrome 从 50+ 版本起移除了实验性支持，Firefox 从未实现，Safari 仅在极旧 WebKit 内核中短暂存在且需 -webkit- 前缀。现在写 wrap-flow: both 不会触发任何环绕行为，控制台也无报错——它就只是被忽略。
常见错误现象：
– 设置了 wrap-flow: clear 后文本仍直穿绝对定位元素
– 检查 computed style 发现该属性值显示为 initial 或直接不出现
– 尝试搭配 position: absolute 元素期望“排除”，结果毫无反应
- 它只对设置了
float的元素（且必须是块级）有理论作用，但现代浏览器已弃用该路径 - 规范本身已被 W3C 标记为“Inactive”，不再推进
- 若你看到某篇教程说“
wrap-flow实现图文绕排”，大概率是混淆了早期 Blink 实验分支或伪造演示
shape-outside 是当前唯一可靠方案
它要求目标元素同时满足三个硬性条件：浮动（float: left 或 right）、块级（display: block）、有明确宽高（否则形状坐标系无法建立）。一旦满足，文本就会真实绕开你定义的几何轮廓。
使用场景举例：
– 新闻页中头像右浮动，正文文字沿头像边缘自然流动
– 杂志式布局中，一个倾斜的色块作为视觉锚点，文字贴边环绕而非生硬截断
- 基础 polygon 示例：
shape-outside: polygon(0 0, 100% 0, 100% 80%, 0 100%)—— 定义一个梯形排除区 - 用图片 alpha 通道：
shape-outside: url("mask.png");，图片透明区域即文本可进入区，不透明区域即排除区 - 注意：必须搭配
float，仅设shape-outside而不浮动，CSS 引擎直接忽略该声明
绕不开的兼容性与性能坑
shape-outside 在 Chrome 37+、Firefox 62+、Safari 10.1+ 中稳定支持，但 IE/Edge Legacy 全军覆没。更隐蔽的问题是布局性能：当形状复杂（如 50+ 个顶点的 polygon）或频繁重排时，浏览器需反复计算文本折行位置，可能引发 FPS 下降。
- 避免在
scroll或resize回调里动态改shape-outside值 - 用
clip-path做视觉裁剪 ≠shape-outside做内容排除——前者只影响渲染，后者影响布局流 - 若需支持老浏览器，fallback 方案只能是退化为传统
float+margin手动预留空白，无法实现真·非矩形环绕
容易被忽略的关键细节
很多人卡在“写了 shape-outside 但没效果”，根本原因往往不是语法错，而是布局上下文缺失：
- 父容器不能是
overflow: hidden，否则会裁掉绕行后的文本溢出部分 - 浮动元素自身需有
width和height，哪怕只是width: 1px; height: 1px，否则shape-outside计算坐标系失败 - 文本容器必须是普通文档流中的块级元素（如
<p></p>），不能是display: flex或display: grid的直接子项——flex/grid 容器会切断浮动流的影响范围
真正难的从来不是写对那行 shape-outside，而是让整个布局链路不破坏浮动上下文。一旦某个中间层用了 display: contents 或 contain: layout，环绕就悄无声息地断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
