浮动元素使后续文本空格变大，因其脱离文档流导致行盒基线对齐异常；解决应避免float布局，改用Flexbox/Grid，或用word-spacing替代空格。
float元素后文本换行错位：为什么空格变大了
浮动元素会脱离文档流，导致后续内联内容（比如文字、 、空格）的基线对齐逻辑异常。浏览器在计算行高时，会把浮动元素的底部边缘当作“参考线”，而原本连续的空格字符被拆到不同行上，视觉间距就突然拉开了。
- 这不是CSS的bug，是CSS 2.1规范里明确定义的浮动渲染行为
- 常见于侧边栏+正文组合，尤其当正文中含
-
line-height越大，错位越显著；font-size变化也会放大差异
clear:both不能解决空格间距问题
clear只是让元素避开浮动区域，不干预内联内容的排版上下文。给段落加clear: both，只让它从浮动下方开始，但段落内部的空格、 依然按浮动影响后的行盒（line box）规则排列。
- 错误做法：
<p style="clear:both">文字 文字</p>→ 空格还是撑开 - 真正要干预的是包含这些空格的行盒本身，不是块级容器
- 用
overflow: hidden或BFC触发新格式化上下文，能隔离浮动影响，但对内联空格无直接修复作用
用white-space和word-spacing微调空格表现
浮动本身不改变空格语义，但改变了它们所处的行盒尺寸和位置。最可控的方式是显式控制空格渲染行为：
- 统一用
white-space: nowrap限制换行 - 若需保留换行，改用
word-spacing代替空格数量控制间距，例如word-spacing: 8px - 避免在浮动旁混用
text-align: justify，它会进一步拉伸空格，加剧不一致 - 示例：
<span style="word-spacing: 6px">左文 右文</span>比左文 右文更稳定
现代方案：别用float做布局
所有浮动带来的空格、清除、高度塌陷问题，本质是它本就不该用于整体布局。Flexbox和Grid完全绕过这些历史包袱：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏+正文用
display: flex，浮动相关样式全部删掉，空格恢复自然表现 - 如果必须兼容IE8–9，用
display: inline-block替代float，但要注意vertical-align和父容器font-size: 0清空间隙的副作用 - 哪怕只改局部，也优先考虑
display: flow-root（IE不支持），它创建BFC且不影响内联排版逻辑
浮动还在用，往往是因为老代码没动、或者误以为“清除浮动”就等于“解决了浮动问题”。其实只要浮动存在，它对周围内联内容的影响就一直在线——这点最容易被忽略。
