浮动列表末行不对齐主因是容器宽度无法整除子项宽加间距，解决需统一子项宽度+box-sizing:border-box、用margin-right配合:nth-child清除末项外边距、父容器清除浮动（overflow:hidden或伪元素），或改用flex布局。
浮动列表最后一行不对齐，通常是因为容器宽度无法整除子项宽度加间距，导致末尾项被“挤”到下一行，且因剩余空间不足而左对齐或错位。核心解决思路是让每行子项总宽度严格一致，并消除累积的 margin 或 border 误差。
统一子项宽度 + box-sizing: border-box
确保所有列表项（如 li 或 div）设置固定宽度，并启用 box-sizing: border-box，把 padding 和 border 算入宽度内，避免意外溢出：
-
推荐写法：
width: 200px; box-sizing: border-box; - 避免只设
width却忽略padding或border，否则实际占用宽度变大，破坏等分布局
用 margin-right 替代 margin-left 避免首项偏移
给每个子项加 margin-right，但最后一项需清除该 margin，防止整行总宽超标。可用 CSS 的 :nth-child 实现：
li { float: left; margin-right: 16px; }-
li:nth-child(3n) { margin-right: 0; }（假设每行3个） - 这样每行总宽 = 3 × 子项宽度 + 2 × 16px，稳定可控
为容器设 overflow: hidden 或伪元素清除浮动
浮动会脱离文档流，若父容器没清除浮动，高度塌陷可能间接影响布局表现：
立即学习“前端免费学习笔记（深入）”；
- 简单做法：
.list { overflow: hidden; }（触发 BFC，自动包裹浮动子项） - 更规范做法：在容器末尾加
::after伪元素清除浮动 - 不推荐仅靠
clear: both在额外空标签上，增加冗余 HTML
考虑改用 Flex 布局替代浮动（现代方案）
浮动本就不是为网格布局设计的。若兼容性允许（IE10+），直接用 display: flex 更可靠：
.list { display: flex; flex-wrap: wrap; }.item { flex: 0 0 200px; margin-right: 16px; }- 最后一项可通过
:nth-child(3n)去掉margin-right，逻辑更直观
