index.html中如何让文字绕排在图片周围

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 清除浮动，响应式切换后记得也重置它，避免意外留白

绕排看着简单，实际最麻烦的是边界情况：图片加载失败时的 fallback、字体加载延迟导致的重排、以及 Safari 对 shape-outside 的各种静默降级。真要稳定，老老实实用 float + 媒体查询，比折腾新特性省心。