浮动元素让文字绕行是因为其脱离文档流后仍影响行盒布局边界，浏览器生成每行文字时会避开浮动区域，使line box收缩并在剩余空间排列。
浮动元素为什么会让文字绕着它走
因为浮动元素会脱离普通文档流，但它的存在依然会影响后续行内内容的“行盒”（line box）布局边界。浏览器在生成每一行文字时，会检查当前行可用的水平空间——浮动元素占据的区域会被视为不可用，于是文字自动绕开，在剩余空白处排列。
这不是文字主动“识别”了浮动块，而是行盒高度和宽度被重新计算的结果。关键点在于：line box 会收缩以避开浮动区域，只要它没被强制撑满（比如设置了 width: 100% 或 display: block）。
哪些元素会受浮动影响而环绕
只有处于普通流中的、生成行盒的元素才会绕浮。典型场景是段落里的纯文本、span、em、strong 这类行内级内容；而 div、p（默认 display: block）、h1 等块级元素不会绕，它们会直接从浮动元素下方开始渲染（除非也设成 float 或 inline-block）。
-
p标签内部的文字会绕，但整个p盒子本身不会“贴着浮动块右侧排布” -
img设了float: left后，后面紧挨着的p文字会绕，但该p的上边距仍可能和浮动元素顶部对齐（取决于margin-top和行高） - 如果给文字容器加了
overflow: hidden或display: flow-root，它会创建新的 BFC，从而阻止文字绕行——这是最常用的“清浮动+防环绕”手段
常见环绕异常：文字被切掉或错位
这通常不是浮动本身的问题，而是行盒高度不足或垂直对齐方式冲突导致的。例如图片浮动后，文字第一行可能被截断，是因为 line-height 太小，或者图片没有设置 vertical-align，默认按基线对齐，把行盒拉高/压低了。
立即学习“前端免费学习笔记（深入）”；
- 图片浮动时务必加上
vertical-align: top或middle，避免基线对齐引发的空隙 - 文字行高
line-height小于图片高度时，第一行文字可能被遮挡——调大line-height或给容器加padding-top - 浮动元素后面紧跟一个空
div，它不会绕，但可能因 margin 折叠显得位置奇怪；此时不如用clear: both显式控制
现代替代方案为什么更可靠
float 做图文环绕本质是副作用，不是设计初衷。CSS Grid 和 Flexbox 不支持自然环绕，但 shape-outside + float 可以做非矩形环绕（如文字绕圆图），而真正语义清晰的图文混排，推荐用 display: flow-root 配合 float 控制浮动范围，或直接上 CSS Shapes API。
不过要注意：shape-outside 只对浮动元素生效，且不支持所有形状（比如 inset() 要配合 margin 才能出效果），而且 Safari 对部分语法支持滞后。真要兼容老浏览器，还是得靠 float + clear 组合。
绕不开的细节是：浮动影响的是行盒，不是块盒；控制环绕的关键，永远是那个看不见的 line box 的尺寸和位置。
