浮动元素脱离文档流但未脱离文本流，因其本质是行内格式化上下文（ifc）中的特殊占位块，参与行框计算，故文字可感知其边界并自动绕排；块级元素则因建立独立bfc而不绕行。
浮动元素确实脱离了文档流，但没脱离文本流——这不是 bug，是 float 的设计本意。它从一开始就是为图文混排服务的，浏览器渲染时会把浮动元素当作「行框里的特殊占位块」来处理，文字自然能感知边界并绕排。
float 本质是行内格式化上下文（IFC）参与者
脱离文档流 ≠ 脱离所有布局上下文。float 元素仍保留在包含块内，并参与行框（line box）计算。文字属于行内内容，浏览器在构建每一行时，会把浮动元素的 margin-box 当作不可穿透的障碍物，自动调整文字换行位置。
-
float: left会让后续行内内容从它的右侧开始填入，直到该行剩余宽度不足以容纳下一个单词，才折到下一行继续绕排 - 如果浮动元素高度超过当前段落，下一段
<p></p>仍会从浮动元素底部开始继续环绕——这是 IFC 的连续性行为，不是“文字被顶下去” - 你用 DevTools 查看 computed
line-height或inline-size，会发现文字容器的行盒高度其实被浮动元素撑开了
为什么块级元素不绕，而文字能绕？
因为绕排只发生在行内格式化上下文中。块级元素（如 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>）默认建立自己的块级格式化上下文（BFC），不继承外部浮动的影响；但它们内部的文字流仍受父容器的 IFC 约束，所以文字可以绕，而整个 <p></p> 容器的位置不会因此上移。
- 给
<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">，给它设 <code>max-width: 200px、overflow: hidden、white-space: nowrap - 若该容器也浮动了，那它自己又脱离文档流，宽度更难预测——所以现代写法倾向用
display: flex隔离尺寸依赖
最常被忽略的一点：浮动的生命周期必须和响应式状态同步管理。小屏下取消 float 时，如果忘了把对应文字容器的 overflow: hidden 或 display: flow-root 一并重置，文字可能被意外裁剪或错位——这跟 float 本身无关，而是 BFC 边界残留导致的布局断裂。
