float 是当前唯一原生支持图文环绕且浏览器兼容性稳定的方案，需将 img 置于文字流中并设 float:left/right、明确 width、用 margin 控制间隙，必要时 clear 清除浮动；shape-outside 可实现不规则绕排但依赖 float 且 Safari 支持差；禁用 inline-block 或 absolute 替代；响应式下应通过媒体查询退回到图上文下布局。
用 float 实现文字绕排是最直接的方案
现代 CSS 里没有“文字绕排”专用属性，float 是唯一原生支持图文环绕的机制——它不是过时技巧，而是当前唯一被所有浏览器稳定支持、且语义合理的方式。
关键点在于：必须把 <img> 放在文字流中（不能用 background-image），并给它设置 float: left 或 float: right。
-
float元素会脱离文档流，但其后的内联内容（如段落文字）会自动绕到它的另一侧 - 必须为图片设置明确的
width，否则绕排可能错乱（尤其在响应式布局中） - 绕排区域默认紧贴图片边缘，想留空隙就加
margin，比如margin-right: 1rem - 如果后续内容不想绕排（比如下一个标题），需清除浮动：
<div style="clear: both"></div>或用::after伪元素触发 BFC
shape-outside 能做不规则绕排，但兼容性和使用门槛高
如果你的图片是圆角、椭圆或 SVG 路径轮廓，想让文字真正“贴着形状”走，就得用 shape-outside。但它依赖 float 基础，且有硬性限制：
- 只对
float元素生效，单独加shape-outside没反应 - 必须配合
clip-path或图像 alpha 通道（url(#svg-path)或url(image.png)）才能定义形状 - Chrome/Firefox 支持较好，Safari 对
url()形状支持不稳定，iOS Safari 基本不可靠 - 示例：<img src="circle.png" style="float: left; width: 200px; shape-outside: circle(50%);">
别用 display: inline-block 或 position: absolute 替代
这两种写法看似能“把图放旁边”，但根本不是绕排，容易引发隐藏问题：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block图片只是和文字在同一行显示，文字不会“流过去”，换行后文字会从下一行顶格开始，无法形成环绕效果 -
position: absolute让图片脱离文档流，文字完全无视它，相当于图是浮在文字上面的——你看到的“绕排”只是巧合对齐，窗口缩放或字体变化就会错位 - 二者都无法响应段落高度变化，一旦文字增多，绝对定位图会盖住内容，
inline-block则可能撑开行高导致上下错位
响应式场景下绕排容易崩，必须加断点控制
小屏幕宽度不够时，硬绕排会让文字挤成窄列、可读性暴跌，这时候应该主动退回到“图上文下”布局。
- 用媒体查询在
max-width: 600px时取消float：img { float: none; margin: 0 auto; display: block; } - 不要只靠
width: 100%，要同时重置shape-outside和margin，否则 Safari 可能保留旧形状导致空白区异常 - 如果用了
clear清除浮动，响应式切换后记得也重置它，避免意外留白
shape-outside 的各种静默降级。真要稳定，老老实实用 float + 媒体查询，比折腾新特性省心。 
