根本原因是行框高度不一致；浮动元素脱离文档流致父容器无法撑高，text-align对其无效，需用inline-block+vertical-align:bottom或flex+align-items:flex-end解决。
float 导致列表项底部不对齐，根本原因是行框高度不一致
浮动元素脱离文档流后，父容器不会自动撑高，而 text-align 只影响行内内容的水平对齐，对已脱离流的 float 元素完全无效。常见现象是：几个 li 都设了 float: left，但文字行数不同（比如有的两行、有的单行），结果底部参差不齐——这不是 text-align 能修的，它压根没在管这些浮动块。
真正起作用的是行框（line box）的基线对齐逻辑。当浮动元素高度不等，它们的“视觉锚点”实际落在各自顶部，而非底部或中线，所以人眼一看就歪。
- 别试图用
text-align: center或right去“对齐浮动项”，它只对未浮动的行内内容生效 - 如果必须用
float（比如兼容 IE8），得手动统一高度，比如给所有li加min-height或height - 更靠谱的做法是放弃
float布局，改用display: inline-block+vertical-align: bottom，或者直接上display: flex
inline-block + vertical-align 是最轻量的替代方案
inline-block 保留了行内布局的特性，又能设置宽高和边距，配合 vertical-align 可精确控制垂直对齐基准。相比 float，它不脱离流、父容器能正常撑高，也没有清除浮动的麻烦。
示例中把 li 改成 display: inline-block 后，加一句 vertical-align: bottom，所有项底部立刻对齐：
立即学习“前端免费学习笔记（深入）”；
li {
display: inline-block;
vertical-align: bottom;
width: 120px;
margin-right: 10px;
}
-
vertical-align的可选值里，bottom、top、middle最常用；baseline容易因字体大小差异导致错位，慎用 - 注意默认有空白符（换行/空格）会生成 4px 左右间隙，可用
font-size: 0在父容器上消除，子元素再单独设字体大小 - IE8+ 全支持
inline-block，比flex兼容性更好，适合需要保底的场景
flex 布局下对齐干净利落，但要注意 flex-direction 和 align-items 的分工
用 display: flex 时，justify-content 控制主轴（默认是水平）对齐，align-items 控制交叉轴（默认是垂直）对齐。想让列表项底部对齐，关键不是 justify-content，而是 align-items: flex-end。
错误写法是只设 justify-content: flex-end——那只是把整行往右挤，项本身依然顶着顶部排。
- 父容器设
display: flex，子项自动成为 flex item，无需再写float或inline-block - 要底部对齐：加
align-items: flex-end；要居中对齐：用align-items: center - 如果列表项高度差异大，且希望每项内部文字也底部对齐，需额外在
li里设display: flex; flex-direction: column; justify-content: flex-end
float 清除不彻底会导致后续内容塌陷，不是对齐问题而是布局失控
很多人调了半天 text-align 和 float，最后发现下面的段落直接叠到列表上面去了——这已经不是对齐偏差，是父容器高度为 0 的典型塌陷现象。根源是所有子项都 float 了，父容器“看不见”它们。
- 老办法是加一个
div末尾设clear: both，但语义差、冗余 - 现代写法用伪元素：
::after { content: ""; display: table; clear: both; }挂在父容器上 - 但最省心的还是别用
float做布局，尤其在响应式场景下，flex或grid几乎没有这类副作用
浮动本意是让文字环绕图片，硬拉来当布局工具，就像用螺丝刀拧螺母——能转，但费劲还容易滑丝。对齐偏差只是表象，背后是模型错配。
