float是实现文字环绕图片最轻量、兼容性最好的原生方案，需为设置float:left或float:right及显式width，并确保其位于文字前、同属一个bfc，同时处理父容器坍缩与清除浮动问题。
直接说结论：浮动文字说明不是指“让文字浮在图片上”，而是让文字环绕图片排版——实现方式是给 <img> 加 float: left 或 float: right，不是给文字加浮动。
为什么 float: left 才能让文字绕到图片右边
浏览器的文本流默认从左到右、从上到下排列。当 <img> 设置 float: left 后，它会脱离文档流但“留出轮廓”，后续段落文字（如 <p></p>）仍按行内逻辑填充其右侧和下方空间——这就是“环绕”的本质。
- 必须把
<img>写在文字内容之前，HTML 顺序决定环绕起始位置 - 图片必须有明确
width（比如width: 200px），否则宽度塌陷会导致文字错位或跳动 - 务必加
margin-right（左浮动时）或margin-left（右浮动时），否则文字紧贴图片边缘，可读性差 - 父容器若用了
display: flex或display: grid，float会直接失效——此时不能硬扛，得换方案
常见崩坏现象和快速修复
试了 float 却没绕、图片下沉、后续段落卡住不动？大概率踩了这几个坑：
- 父容器设了
overflow: hidden或display: flex：这会创建新 BFC，把浮动“截断”，文字绕不进去。修复：换用overflow: auto（注意高度影响），或干脆不用浮动 - 浮动图片后面跟着空
<p></p>或只有空格：这类节点不参与文本流，不会被绕排。修复：删掉空标签，或确保后续是含实际文字的块级元素 - 图片用了
max-width: 100%但没设width：加载中占位塌陷，文字先绕了个寂寞，图一出来就重排闪动。修复：显式写width+height，或用aspect-ratio - 没清浮动：后续块级元素（比如下一个
<h3></h3>）可能卡在图片下方。修复：在浮动区域后加<div style="clear: both"></div>，或在父容器上用伪元素清除
float 不是唯一解：什么时候该换方案
如果你要的是“文字贴着不规则图片边缘走”（比如圆形头像旁绕排），float 完全做不到，必须用 shape-outside：
-
shape-outside只修饰已浮动的元素，所以仍需先写float: left - 只对块级替换元素生效（
<img>、<svg></svg>），对<div> 背景图无效 <li> <code>shape-outside: circle(50%)的圆心默认在左上角，得配shape-margin控制文字与形状间隙 - 兼容性尚可（Chrome/Firefox/Edge 皆支持），但 Safari 需加
-webkit-shape-outside
真正复杂的图文混排（比如多图交错、响应式断点频繁切换），float 已不是首选。现代项目更倾向用 display: inline-block 配合垂直对齐，或直接上 CSS Grid 划分图文轨道——毕竟浮动本就是为印刷排版设计的老机制，不是为 Web 流式布局服务的。
