浮动元素脱离文档流但未脱离文本流，因其本质是行内格式化上下文（IFC）中的特殊占位块，参与行框计算，故文字可感知其边界并自动绕排；块级元素则因建立独立BFC而不绕行。
浮动元素确实脱离了文档流，但没脱离文本流——这不是 bug，是 float 的设计本意。它从一开始就是为图文混排服务的，浏览器渲染时会把浮动元素当作「行框里的特殊占位块」来处理，文字自然能感知边界并绕排。
float 本质是行内格式化上下文（IFC）参与者
脱离文档流 ≠ 脱离所有布局上下文。float 元素仍保留在包含块内，并参与行框（line box）计算。文字属于行内内容，浏览器在构建每一行时，会把浮动元素的 margin-box 当作不可穿透的障碍物，自动调整文字换行位置。
-
float: left会让后续行内内容从它的右侧开始填入，直到该行剩余宽度不足以容纳下一个单词，才折到下一行继续绕排 - 如果浮动元素高度超过当前段落，下一段
<p>仍会从浮动元素底部开始继续环绕——这是 IFC 的连续性行为，不是“文字被顶下去” - 你用 DevTools 查看 computed
line-height或inline-size，会发现文字容器的行盒高度其实被浮动元素撑开了
为什么块级元素不绕，而文字能绕？
因为绕排只发生在行内格式化上下文中。块级元素（如 <div>、<p>）默认建立自己的块级格式化上下文（BFC），不继承外部浮动的影响；但它们内部的文字流仍受父容器的 IFC 约束，所以文字可以绕，而整个 <p> 容器的位置不会因此上移。
- 给
<p>加overflow: hidden会触发 BFC，反而让这段文字彻底放弃绕排、从顶部独占一行 - 想让整块内容都“避让”浮动区域？得用
clear: left或clear: right控制自身上边界，而不是指望它自动绕 -
clear不是“清除浮动”，而是“声明自己不和某侧浮动共存于同一行”
text-overflow 失效的根本原因
text-overflow: ellipsis 需要稳定宽度 + overflow: hidden + white-space: nowrap 三者共存，但浮动元素本身宽度不稳定、且不控制其内部文字的行盒截断逻辑——它只影响外部文字怎么绕，不管内部怎么截。
立即学习“前端免费学习笔记（深入）”；
- 别给浮动图片加
text-overflow，毫无意义 - 真正要截断的，是包裹文字的容器：比如一个
<div class="caption">，给它设max-width: 200px、overflow: hidden、white-space: nowrap - 若该容器也浮动了，那它自己又脱离文档流，宽度更难预测——所以现代写法倾向用
display: flex隔离尺寸依赖
最常被忽略的一点：浮动的生命周期必须和响应式状态同步管理。小屏下取消 float 时，如果忘了把对应文字容器的 overflow: hidden 或 display: flow-root 一并重置，文字可能被意外裁剪或错位——这跟 float 本身无关，而是 BFC 边界残留导致的布局断裂。
