float导致列表底部参差不齐的根本原因是脱离文档流后垂直锚点默认在顶部且高度不一；推荐用inline-block+vertical-align:bottom或flex+align-items:flex-end解决。
为什么float商品列表底部总是参差不齐
根本不是text-align没生效，而是float让li或.product-card彻底脱离文档流，它们的垂直对齐锚点默认落在顶部，且彼此高度不同——文字行数多的卡片高，少的矮，视觉上就“脚踩不到同一水平线”。text-align: center或right对这些已脱离流的块完全无效，它只管行内内容。
用inline-block + vertical-align: bottom替代float
这是兼容性好、改动小、见效快的方案，尤其适合还要支持 IE8–IE11 的项目：
-
li或.product-card设display: inline-block，不再脱离流，父容器能自然撑高 - 必须加
vertical-align: bottom（别用baseline，字体大小稍有差异就错位） - 父容器加
font-size: 0消除 HTML 换行带来的约 4px 间隙，子项再单独设font-size - 所有项统一
box-sizing: border-box，避免padding/border撑破宽度
ul { font-size: 0; }
.product-card {
display: inline-block;
vertical-align: bottom;
width: 220px;
margin-right: 16px;
box-sizing: border-box;
font-size: 14px;
}
直接切到flex布局控制底部对齐
如果不需要保底旧浏览器，flex是最干净的解法。关键不是justify-content，而是交叉轴对齐：
- 父容器设
display: flex+flex-wrap: wrap+gap: 16px - 用
align-items: flex-end让每行内所有卡片底部对齐（注意：不是align-content，那是多行之间的对齐） - 若需最后一行居中，不要动
justify-content，而应改用display: grid，因为flex-wrap下justify-content: space-between在末行会拉出巨大空隙 - 避免给子项设
float或vertical-align，和flex冲突
用float时强行对齐的代价和陷阱
真要硬用float，就得接受它的限制并手动补救：
- 给所有卡片加
min-height（比如min-height: 320px），靠高度截断统一视觉基线 - 清除浮动必须写在最后一个浮动元素之后的**第一个块级文档流元素**上，写在
.product-card自己身上或span上都无效 -
overflow: hidden虽能撑父容器，但可能意外裁剪position: absolute的下拉菜单或动画位移后的阴影 - 响应式断点里突然错位，大概率是
width + padding + margin超了容器，务必检查box-sizing: border-box是否漏设
最常被忽略的一点：浮动布局里没有“底部对齐”这个概念，只有“顶部贴边+手动拉齐”，所有所谓“修复”都是打补丁。一旦卡片内容动态变化（比如促销标签出现/消失），高度又会变，得反复调min-height——这不是可持续的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
