浮动布局无法自动实现最后一行居中对齐，需改用inline-block+text-align或flex布局；必须先用::after清除浮动撑开父容器，否则对齐无从谈起。
浮动元素最后一行左对齐，不是靠 float: left 就能完事的
纯 float: left 布局下，当容器宽度不足以容纳整行子项时，最后一行会“贴左”——但这不是你想要的“对齐”，而是剩余空间被丢弃后的自然塌陷。浏览器不会主动帮你把最后一行居中或右对齐，它只按文档流顺序逐个浮动，到放不下就换行，然后从最左边开始排。
常见错误现象：margin-right 配合 float: left 做等距网格，最后一行间隙错乱、右侧留白过大、甚至出现“空半格”；用 text-align: center 包裹浮动元素无效，因为浮动元素已脱离文本流。
- 真正起作用的是容器级控制：要么清掉浮动干扰（用
::after），要么改用更可控的布局模型 - 如果必须用浮动（比如兼容 IE8），就得手动补“幽灵项”或用负边距抵消，但维护成本高
-
display: inline-block+text-align是更轻量的替代方案，但要注意换行符和空格会生成间隙
用 ::after 清除浮动并撑开容器，是基础前提
不先解决父容器高度塌陷，谈最后一行对齐就是空中楼阁。浮动子元素不会撑开父容器，导致后续内容上浮、背景色丢失、边框消失——这时候连“最后一行在哪”都难定位。
标准做法是给父容器加一个伪元素清除浮动：
立即学习“前端免费学习笔记（深入）”；
.grid::after {
content: "";
display: table;
clear: both;
}注意点：
-
display: table比block更稳妥，避免某些旧版浏览器中clear失效 - 别用
overflow: hidden强撑高度，它可能意外裁剪position: absolute子元素或阴影 - 这个步骤不是可选的——没它，
text-align或justify-content都无从生效
最后一行居中对齐：靠 text-align: center + inline-block，不是浮动
浮动本身不支持“行内对齐”，但把子项设为 display: inline-block，再配合容器 text-align: center，就能让每行内部自动居中，包括最后一行。
关键配置：
- 父容器：
text-align: center - 子项：
display: inline-block，且必须显式设置vertical-align: top（否则默认 baseline 对齐，文字基线导致高低不一） - 去掉所有
float和margin-right控制间距，改用margin四边统一处理
示例结构：
.grid { text-align: center; }
.grid > * { display: inline-block; vertical-align: top; margin: 0 10px; }兼容性好，IE8+ 可用；缺点是 HTML 中的换行符会被渲染为空格，导致子项间多出 4px 间隙——可用 font-size: 0 在父容器上消除，子项里再设回正常字号。
现代方案直接绕过浮动：用 display: flex 的 justify-content
如果你不需要支持 IE9 以下，flex 是最干净的解法。justify-content: center 能让整行居中，但默认只对齐“当前行”，最后一行仍会左对齐——要让它也居中，得加 flex-wrap: wrap 并确保容器有明确宽度。
真正起作用的是这句：
.grid { display: flex; justify-content: center; flex-wrap: wrap; }注意事项：
- 子项不能设
float，否则会脱离 flex 上下文，行为不可控 - IE10+ 支持带前缀的
flex，但justify-content: center在 IE10/11 中对最后一行的支持不稳定，建议加margin: auto到子项作为后备 - 如果子项宽度不固定，
justify-content: space-between会导致最后一行两端对齐、中间空——这不是 bug，是设计如此
浮动布局里所谓“最后一行对齐”，本质是人工模拟了 flex 的行内对齐逻辑。真要长期维护，优先切到 flex 或 grid；还在用浮动，就得接受它天生不擅长这件事——补丁越多，越容易在响应式断点处崩出新问题。
