CSS浮动布局下文字重叠如何办_调整line-height与clear清除规则

CSS浮动布局下文字重叠如何办_调整line-height与clear清除规则需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

浮动导致文字重叠的根源是父容器高度塌陷，使后续文字行框从浮动元素底部起排；解决需clear后续兄弟元素或用BFC（如display:flow-root）恢复文档流。

浮动元素导致文字重叠的典型表现

这是浮动布局中最容易被误判为“字体 bug”或“渲染异常”的问题：父容器高度塌陷，后续段落文字直接从浮动元素底部向上爬升，和浮动块里的文字视觉上重叠。不是文字本身错位，而是行框（line box）在浮动干扰下计算失准——line-height 再大也压不住，因为根本没给它“可排布的空间”。

常见问题表现包括：

1. float: left 的图片右侧文字挤成一团、断行异常
2. 多行文字最后一行紧贴浮动元素底边，像被“吸住”
3. 使用 margin-bottom 无效，但加个 clear: both 就好了

为什么只调 line-height 没用

line-height 控制的是行框内部基线间距，不参与文档流定位。当父容器因浮动塌陷、高度为 0 时，后续文字的行框会按“上一个非塌陷块级盒的底边”作为参考起点排布——这个起点往往就是浮动元素的底部边缘，于是文字就叠上去了。

真正起作用的是：

1. 让父容器恢复高度（BFC 触发）
2. 或让后续文字“知悉”浮动已存在，主动绕开（clear）
3. 单独调 line-height 只会让重叠的文字行更高，但依然重叠，甚至更丑

clear 该加在谁身上？

不是加在浮动元素自己身上（clear 对 float 元素自身无效），而是加在需要避开浮动的后续兄弟元素上：

1. 如果是段落文字紧随浮动图后，就在 <p> 上加 clear: both
2. 如果是多个浮动并列（如两栏缩略图），后续标题想独占一行，就给标题加 clear: left 或 clear: right
3. 父容器加 clear 无效，因为它不是浮动元素的兄弟，而是祖先

示例：

<div class="wrap">  <img src="a.jpg" style="float: left">  <p style="clear: both">这段文字不会再和图片重叠</p></div>

BFC 是更干净的解法，但要注意触发条件

用 overflow: hidden、display: flow-root 或 contain: layout 给父容器创建 BFC，能自动包含浮动子元素、撑开高度，后续文字自然从新形成的块级上下文底部开始排布。

但要注意：

1. overflow: hidden 会裁剪溢出内容（比如带阴影或下拉菜单的浮动元素）
2. display: flow-root 是现代标准解法，兼容性到 Chrome 64+/Firefox 58+，IE 完全不支持
3. 不要对整个页面根元素滥用 BFC，可能影响滚动行为或 transform 动画合成层

文字重叠问题的根子不在字体或行高，而在文档流是否被正确维护；一旦忽略清除逻辑或 BFC 机制，再调十遍 line-height 都只是在掩盖塌陷。