float布局末行左对齐是固有行为，因浮动仅脱离文档流贴边、不控制对齐；应优先用inline-block+vertical-align或flex/grid替代，必要时用伪元素清除+占位。
浮动盒子宽度不一致时，float 本身无法自动对齐末行
直接给多个 div 加 float: left，当容器宽度不足以容纳下一行全部盒子时，最右边那个会掉到下一行——但它的左边界仍紧贴父容器左边，不会和上一行的“空缺”对齐。这不是 bug，是 float 的行为本质：它只影响后续内容的环绕，不参与网格式布局。
常见错误现象：float 盒子在响应式容器中换行后出现左侧悬垂、右侧留白不均、视觉上“错行”；尤其在卡片列表、商品格子等场景里特别明显。
- 别指望靠
margin手动调每行第一个盒子的clear: left—— 容器宽度一变，断点就失效 - 避免用
nth-child硬写clear，比如:nth-child(3n+1) { clear: left; }，这仅在固定列数且宽度恒定时有效 -
overflow: hidden或clearfix只解决父容器塌陷，不解决末行对齐问题
用 display: inline-block + vertical-align: top 替代 float
这是兼容性好、可控性强的替代方案，核心在于让元素像文字一样内联排列，同时消除默认基线对齐带来的底部空白。
关键操作：
立即学习“前端免费学习笔记（深入）”；
- 给所有子盒子设
display: inline-block和vertical-align: top - 父容器上清除字体大小带来的间隙：设
font-size: 0；子盒子内再重置font-size（如font-size: 14px） - 子盒子宽度可用百分比（如
width: 32%）、calc()（如width: calc(33.333% - 20px)），或固定值，只要总和 ≤ 100% 即可平铺
示例片段：
.container {
font-size: 0;
}
.box {
display: inline-block;
vertical-align: top;
width: calc(33.333% - 20px);
margin: 10px;
font-size: 14px;
}现代方案优先选 display: flex，但注意换行后的对齐逻辑
flex 是目前最稳妥的选择，但默认 flex-wrap: wrap 下，末行项目仍会左对齐。要实现“两端对齐”或“居中对齐”，得配合 justify-content。
- 如果希望每行都填满容器：用
justify-content: space-between或space-around，但需确保每行项目数可控（否则间隙会异常） - 如果只是想让末行居中：加
justify-content: center，但整体会失去左右对齐感 - 真正接近“平铺对齐”的做法是结合
flex-basis和min-width，例如：flex: 0 0 calc(33.333% - 20px)，再配margin控制间距 - IE10+ 支持
flex，但旧版 IE 对flex-wrap和gap支持差，gap必须用margin模拟
别忽略容器 box-sizing 和边框/内边距的影响
多个不同宽度的盒子能“刚好平铺”，前提是计算宽度时包含了 border 和 padding。默认 box-sizing: content-box 会让 width: 33% + padding: 10px 实际占位超过 33%，导致换行提前。
- 统一设
box-sizing: border-box是必须步骤，最好全局重置：* { box-sizing: border-box; } - 如果用
inline-block，border和padding会参与行内盒模型，同样需纳入width计算 - Flex 项的
flex-basis默认按content-box解析，所以也建议统一设为border-box
真正麻烦的不是怎么排，而是宽度计算是否稳定——哪怕只漏一个 box-sizing，在不同浏览器缩放或字体渲染下就可能错位一像素。
