float导致文字环绕的底层逻辑是将元素移出常规文档流，使后续行内内容自动绕开浮动区域排布；块级容器虽“撞墙”下移，但其内部文本仍会贴边流动。
float 导致文字环绕的底层逻辑是什么
文字环绕图片的本质，是 float 把元素从常规文档流中“抽出来”，但行内内容（如文字、<span></span>、<em></em> 等）会自动绕开浮动区域重新排布。关键点在于：只有**后续的块级容器不会绕行，但其内部的文本流会绕**。
这意味着：<p></p>、<div> 这类块级元素默认会“撞墙”——顶在浮动元素下方开始渲染；而它们里面的纯文本、<code><strong></strong>、<a></a> 等则会贴着浮动边缘流动。
如何让多段文字都环绕同一张图片
常见错误是把每段 <p></p> 单独包裹在 <div> 里并各自清浮动，结果文字被截断成一段一段。正确做法是：所有需要环绕的文字放在**同一个父容器内**，只对图片设置 <code>float，不干扰文字流的连续性。
- 图片加
float: left或float: right，并配margin预留间隙（如margin-right: 12px） - 文字用普通
<p></p>、<h3></h3>等标签，**不要给它们设float或clear** - 如果父容器有宽度限制，确保它足够容纳“图片宽 + 文字最小可用宽度”，否则文字会换行挤到下一行
.article {
width: 600px;
}
.article img {
float: left;
margin-right: 12px;
width: 180px;
height: 120px;
}
为什么文字有时不绕行、直接掉到图片下面
最常踩的坑是误用了 clear 或父容器触发了 BFC（块级格式化上下文），强行切断了环绕流。典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 图片后紧跟一个带
clear: both的<div>，它会强制换行，且挡住后续所有内容 <li>父容器设置了 <code>overflow: hidden、display: flow-root或float自身，导致内部浮动脱离影响范围 - 图片没有显式设置
width和height，加载完成前高度为 0，文字先排版完毕，加载后才“顶开”文字（可加aspect-ratio或占位样式缓解）
现代替代方案要不要现在就换
float 实现文字环绕依然完全有效，浏览器兼容性覆盖 IE6+，无需担心。CSS Shapes、shape-outside 虽能实现更复杂的绕行（比如绕椭圆），但 Safari 对 SVG <clippath></clippath> 支持不稳定，Firefox 对渐进式图像 shape 计算有延迟，实际项目中反而容易出 layout shift。
除非你明确需要非矩形绕行（比如文字绕 logo 轮廓），否则坚持用 float 更稳。注意一点：别在 Flex 或 Grid 容器里对子项用 float——它们会忽略 float 声明，此时必须退回到普通文档流容器（如 div + display: block）里再用。
