float元素使文字“爬上去”是因为其脱离文档流，行内内容自动绕开浮动区域；根本原因是父容器未形成bfc，而overflow:hidden等值可触发bfc来隔离布局影响。
float元素为什么会让文字“爬上去”
浮动元素脱离文档流，后续的块级元素会无视它继续往下排，但行内内容（比如段落文字）会自动绕开浮动区域——这本来是设计来实现图文混排的，但常被误用导致文字被“顶上去”覆盖在浮动块上。
常见错误现象：float: left 的侧边栏右边紧挨着一个 <p></p>，结果段落首行文字从侧栏底部开始显示，中间像被咬掉一块；或者卡片列表里图片左浮动，标题和描述挤到图片右侧，但高度不一致时下一行文字直接叠在上一张图上。
关键原因不是 float 本身，而是父容器没形成 BFC（块级格式化上下文），无法约束内部浮动的影响范围。
overflow: hidden 真正起作用的原理
overflow: hidden（或 auto、scroll）会让元素触发 BFC，BFC 容器会：
- 包含内部浮动元素（即父容器高度不会塌陷）
- 阻止外部内容（如文字）侵入浮动区域，强制文字在 BFC 边界内重排
这不是“隐藏溢出”，而是BFC 的布局隔离机制在起效。所以哪怕你设 overflow: visible（默认值），也不会生效；必须是非 visible 值。
注意点：
-
overflow: hidden会裁剪真正溢出的内容（比如带阴影的卡片、下拉菜单），不能无脑套用 -
overflow: auto在需要滚动时更安全，但可能意外出现滚动条（尤其在 Safari 中对min-height敏感） - Flex 或 Grid 容器天然是 BFC，现代布局中优先考虑替换
float而非补救
替代方案比 overflow 更干净
如果只是为了防止文字绕浮，又不想动 overflow，这些方法更精准：
- 使用
display: flow-root：专为创建 BFC 设计，无副作用，兼容性到 Chrome 64+/Firefox 59+，Edge 79+ - 给文字容器加
clear: both：适用于明确知道浮动结束位置的场景（比如浮动导航后加一个清空的<div style="clear:both"></div>） - 把文字包装进新块级元素并设
overflow: hidden：比给父容器设更轻量，避免影响整体布局 - 直接弃用
float：用display: flex或display: grid实现同样效果，语义清晰且无塌陷/绕排问题
实际写法示例与易错点
假设有一个头像左浮动、右侧显示用户信息的结构：
<div class="user-card">
@@##@@
<div class="info">
<h3>张三</h3>
<p>前端工程师，喜欢写 CSS</p>
</div>
</div>
错误写法（只给 .avatar 加 float: left）：
.avatar { float: left; }
→ .info 内容会绕浮，高度不一致时文字重叠
推荐写法（给 .info 创建 BFC）：
.info { display: flow-root; }
或（兼容老浏览器）：
.info { overflow: hidden; }
⚠️ 容易踩的坑：
- 给
.user-card设overflow: hidden看似能包住浮动，但如果.info内有绝对定位提示框，会被裁掉 -
clear: both加在.info上无效，因为它是浮动的兄弟，不是后续元素；必须加在浮动元素之后、目标文字之前 -
float和display: inline-block混用时，vertical-align 会影响基线对齐，进一步加剧文字偏移
BFC 的边界意识比技巧更重要——什么时候该让容器自己“收住”浮动，什么时候该让内容主动避让，得看结构语义。否则补再多 overflow，也只是把问题从视觉层压到盒模型层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
