浮动导致文字重叠的根源是父容器高度塌陷，使后续文字行框从浮动元素底部起排；解决需clear后续兄弟元素或用bfc（如display:flow-root）恢复文档流。
浮动元素导致文字重叠的典型表现
这是浮动布局中最容易被误判为“字体 bug”或“渲染异常”的问题：父容器高度塌陷，后续段落文字直接从浮动元素底部向上爬升，和浮动块里的文字视觉上重叠。不是文字本身错位，而是行框（line box）在浮动干扰下计算失准——line-height 再大也压不住，因为根本没给它“可排布的空间”。
常见错误现象包括：
-
float: left的图片右侧文字挤成一团、断行异常 - 多行文字最后一行紧贴浮动元素底边，像被“吸住”
- 使用
margin-bottom无效，但加个clear: both就好了
为什么只调 line-height 没用
line-height 控制的是行框内部基线间距，不参与文档流定位。当父容器因浮动塌陷、高度为 0 时，后续文字的行框会按“上一个非塌陷块级盒的底边”作为参考起点排布——这个起点往往就是浮动元素的底部边缘，于是文字就叠上去了。
真正起作用的是：
- 让父容器恢复高度（BFC 触发）
- 或让后续文字“知悉”浮动已存在，主动绕开（
clear） - 单独调
line-height只会让重叠的文字行更高，但依然重叠，甚至更丑
clear 该加在谁身上？
不是加在浮动元素自己身上（clear 对 float 元素自身无效），而是加在需要避开浮动的后续兄弟元素上：
- 如果是段落文字紧随浮动图后，就在
<p></p>上加clear: both - 如果是多个浮动并列（如两栏缩略图），后续标题想独占一行，就给标题加
clear: left或clear: right - 父容器加
clear无效，因为它不是浮动元素的兄弟，而是祖先
示例：
<div class="wrap"> @@##@@ <p style="clear: both">这段文字不会再和图片重叠</p> </div>
BFC 是更干净的解法，但要注意触发条件
用 overflow: hidden、display: flow-root 或 contain: layout 给父容器创建 BFC，能自动包含浮动子元素、撑开高度，后续文字自然从新形成的块级上下文底部开始排布。
但要注意：
-
overflow: hidden会裁剪溢出内容（比如带阴影或下拉菜单的浮动元素） -
display: flow-root是现代标准解法，兼容性到 Chrome 64+/Firefox 58+，IE 完全不支持 - 不要对整个页面根元素滥用 BFC，可能影响滚动行为或 transform 动画合成层
文字重叠问题的根子不在字体或行高，而在文档流是否被正确维护；一旦忽略清除逻辑或 BFC 机制，再调十遍 line-height 都只是在掩盖塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
