浮动布局不处理多行文本垂直对齐，因浮动元素脱离行内上下文，text-align对其无效；多行底部参差源于行框高度不一致；父容器塌陷需清除浮动；flex布局才是稳定对齐的现代解法。
浮动布局本身不处理多行文本的垂直对齐，它只负责水平“贴边”，所以表现不稳定是设计使然，不是 bug。
text-align 对浮动元素无效，因为它们已脱离行内上下文
浮动元素（如设置了 float: left 的 <p></p>）会变成浮动框（floating box），不再参与父容器的行内格式化上下文（IFC）。而 text-align 只作用于块级容器内部的行内内容——它根本“看不见”浮动元素里的文字，更不会去对齐它们。
- 常见错误：给浮动的
<div> 同时加 <code>float: left和text-align: justify，结果文字依然左对齐 - 真正生效的是该浮动元素的包含块（通常是
或未设text-align的父容器），默认为text-align: start - 若想控制浮动元素内文字对齐，必须确保它仍是块级、有明确宽度，并且未被其他浮动干扰
-
vertical-align对浮动元素无效（它只对inline和inline-block生效） - 试图用
margin-bottom手动拉齐，会因换行位置不可控而失效 - 统一
line-height只能缓解单行文字的基线问题，无法解决多行导致的整体高度差异 - 伪元素清除（
.container::after { content: ""; display: table; clear: both; }）是必要前提，不是可选项 -
overflow: hidden虽能撑高，但可能意外裁剪position: absolute子元素或阴影 - 没这一步，
text-align: center包裹浮动项也毫无效果——因为容器实际宽度可能是 0 - 关键不是
justify-content，而是align-items: flex-end（控制单行内垂直对齐）或align-content: flex-end（控制多行整体对齐） - 不需要
clear、不用操心line-height是否一致、也不用手动算margin - 唯一要注意的是：
flex-wrap: wrap必须显式开启，否则子项会被强行压缩到一行
多行浮动项底部参差，根源在行框高度不一致
浮动按行排列，每行高度由该行最高项决定；但各行之间互不影响。当某些项文字多、换行多，另一些只有一行，它们的底边就自然错开——这不是渲染错误，而是浮动模型的固有行为。
父容器高度塌陷，让对齐失去参照系
浮动元素脱离文档流，父容器若没清除浮动，就会高度坍缩。此时你连“最后一行在哪”都难定位，更别说对其对齐或居中。
现代替代方案里，flex 是最直接的解法
用 display: flex 替代浮动，不是为了“时髦”，而是因为它把对齐逻辑从“行”升级到了“轴”——你可以明确告诉浏览器：“所有子项，在交叉轴上按底部对齐”。
浮动在多行文本场景下本质是个“错位工具”——它被设计来让文字环绕图片，而不是做栅格或列表布局。真要稳定对齐，就得承认它的能力边界，别硬套。
