浮动使元素脱离文档流，导致text-align、line-height等依赖文档流的对齐属性失效；父容器需清除浮动并建立bfc才能恢复对齐控制，推荐改用flex或grid布局。
因为浮动让元素脱离文档流，而 text-align、line-height 等对齐机制全依赖文档流中的块级上下文和行内格式化上下文（IFC）——一旦脱离，这些属性就“看不见”目标了。
text-align 在浮动元素上根本不起作用
很多人误以为给一个 float: right 的 <p></p> 设置 text-align: justify 就能让文字两端对齐，其实完全无效。原因很直接：text-align 只对块级容器的**内部行框**生效，而浮动后该元素变成浮动框（floating box），不再参与父容器的 IFC，其内部文字对齐由包含块（通常是 ）决定，而那个包含块往往没设 text-align，结果就是默认左对齐（LTR）或右对齐（RTL）。
- 常见错误写法：
.text { float: right; text-align: justify; }→text-align被忽略 - 真正起作用的是包裹它的父容器的
text-align，但前提是父容器得能“看到”它——这就需要先清除浮动、建立 BFC - 如果父容器本身也浮动或 display: inline，
text-align会彻底失效
最后一行永远靠左，且无法用 CSS 直接修正
浮动布局下，当子项填不满一行时，剩余项自动换到下一行并从最左边开始排——这是规范定义的行为，不是 bug。你没法用 text-align: center 包裹浮动元素来居中最后一行，因为浮动元素已脱离文本流，text-align 对它们不产生影响。
-
justify-content: space-between在 flex 中能控制间隙，但在 float 下不存在这个概念 - 试图用
margin-left: auto或负边距手动推最后一行，极易在响应式场景下错位 - 唯一“可行”的补救是插入占位元素（如
<div class="placeholder"></div>），但需 JS 计算数量，维护成本高
行高与基线对齐失控，调试成本陡增
浮动元素之间高度不一致时，文字视觉对齐会明显错乱：有的文字贴顶、有的下沉、换行位置不可控。这不是字体问题，而是 line-height 和 vertical-align 在脱离文档流后失去统一参照系。
-
line-height在浮动元素上仍生效，但它只控制该元素内部行框，无法协调兄弟浮动项之间的垂直对齐 - 图片+文字并排时，
vertical-align: middle对浮动元素无效，必须改用display: inline-block或flex - 开发者工具里看到的
height常和line-height不一致，因为浮动元素的实际占据高度还受padding、border、字体度量影响
修复浮动对齐的前提是先“救活”父容器
所有对齐操作都建立在父容器有正确高度和上下文的基础上。而浮动会导致父容器塌陷——背景色消失、边框不包裹、后续内容上浮。没这一步，谈对齐就是空中楼阁。
- 必须用
::after清除浮动：.parent::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden强撑高度，它可能裁剪position: absolute子元素或阴影 - 清浮动后还得确保父容器是块级、有宽度约束（比如
width: 100%），否则text-align依然无基准可依
真正麻烦的不是写几行 CSS，而是每次改动都要反复验证：浮动是否影响了父容器高度？text-align 是否被继承覆盖？line-height 是否在不同字号下失衡？这些连锁反应在响应式断点间尤其脆弱。与其花时间 patch 浮动的对齐缺陷，不如确认下能否把那个容器换成 display: grid 或 display: flex ——那才是多行文本对齐真正稳的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
