index.html中的文字环绕图片排版：HTML经典布局技巧-html教程-PHP中文网

float是唯一稳定原生支持文字环绕图片的方案，需在img上设float:left、显式width、margin-right留白，且文字元素须紧随其后；clear:both作用于自身元素实现换行，非关闭浮动；窄屏应放弃绕排改用图上文下布局。

index.html中的文字环绕图片排版：html经典布局技巧

直接用 float 是当前唯一稳定、原生支持文字环绕图片的方案，别折腾 inline-block 或 position: absolute —— 它们根本不是环绕，只是视觉巧合，一缩放就错位。

文字绕排不是靠“把图放右边”，而是靠让图左浮，文字自动填满它右侧和下方的可用空间。浏览器把浮动后的 <img> 当作一个“障碍物”，行内内容（比如段落文字）会顺着它的边界流动。

float: left 必须写在 <img> 标签上，不能写在父容器或文字元素上
必须显式设置 width（如 width: 200px），仅设 max-width: 100% 在加载中容易塌陷，导致文字先绕错再重排
加 margin-right: 1rem 是为了留白，否则文字紧贴图片边缘，可读性差
文字元素（如 <p></p>）必须紧跟在 <img> 后面，中间不能插 display: flex、overflow: hidden 或空标签——这些会创建新 BFC，切断环绕流

clear: both 的作用对象是它自己所在的元素，不是前面的图片。它只说：“我不能出现在任何浮动元素旁边”，所以会强制下移一行，不再参与环绕。

Soofy

一款通过AI对话帮助用户学习语言的在线学习工具，将语言练习融入真实交流场景。

下载

想让下一段文字不绕图？给那段 <p style="clear: both"></p> 加样式，而不是给图片加
别在环绕段落内部加 clear，否则整段都会掉下来；首行缩进要用 ::first-line
父容器高度坍缩（背景色包不住图）不是 bug，是浮动脱离文档流的必然结果；用 display: flow-root 或伪元素 ::after { content: ""; display: table; clear: both; } 闭合即可

shape-outside 不是 float 的升级版，而是叠加层——它只修饰已浮动元素的绕排轮廓，缺一不可。

必须已有 float: left 或 float: right，单独写 shape-outside: circle(50%) 浏览器直接忽略
图片必须有明确尺寸（width 和 height 或 aspect-ratio），否则形状计算无基准
shape-outside: url(image.png) 在本地 file:// 协议下基本失效，需 HTTP 服务 + CORS 响应头；iOS Safari 对 SVG <path></path> 支持极差，建议优先用 circle() 或 ellipse()

响应式不是让绕排更小，而是主动放弃绕排。窄屏强行图文并列，文字挤成细条，阅读效率暴跌。

用媒体查询在 max-width: 600px 时重置：img { float: none; display: block; margin: 0 auto; }
别指望 shape-outside 在移动端稳定工作——Safari 对该特性的实现断层严重，连 shape-margin 都可能被静默忽略
所有绕排效果都依赖文字处于正常文档流，一旦父容器是 display: flex 或 display: grid，float 立即失效，此时只能改用图文分块结构

真正难的不是写对那几行 CSS，而是判断什么时候不该用绕排——比如标题后紧跟图片、多图连续排列、或文字本身带列表/引用块时，浮动机制会迅速失控。这时候，老老实实上下布局，比硬绕更可靠。