推荐使用 display:flex 替代浮动实现多列底部对齐，因其天然支持等高对齐且语义清晰；若需兼容 IE8–9，可选 display:table-cell 或 JavaScript 动态设高。
多列浮动元素底部不对齐，本质是浮动脱离文档流后，各列高度不一致导致的视觉错位。单纯靠 float 无法自动拉平列高，必须引入额外机制来统一容器高度或改变布局模型。
用 display:flex 替代浮动（推荐）
Flex 布局天然支持等高对齐，无需额外 hack，语义清晰且兼容性良好（IE10+ 支持）。
- 将父容器设为
display: flex，子项默认沿主轴（水平）排列，且 cross-axis（垂直方向）自动拉伸对齐 - 若需换行，加
flex-wrap: wrap；若希望每列宽度固定、自动计算列数，可用flex: 1或结合min-width+flex-basis - 避免给子项设
float，flex 容器内浮动会失效或引发意外行为
保留 float 时用 clearfix 清除浮动并配合伪元素撑高
clearfix 本身只解决父容器塌陷，不能让列底对齐；要实现底部对齐，需额外手段让所有列拥有相同高度。
- 可借助 JavaScript 动态获取最高列高度，再赋给其余列（适合内容动态、列数少的场景）
- 或使用
display: table-cell模拟表格布局（父容器display: table，子项display: table-cell），天然等高，但语义性弱、响应式受限 - 纯 CSS 方案中，
flex是更现代、可控的选择，table-cell可作为兜底兼容 IE8–9
避免常见误区
很多人以为加了 clear: both 或 clearfix 就能对齐底部，其实它只防止父容器高度坍缩，并不控制子项高度。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden触发 BFC 也能防止塌陷，但同样不解决等高问题 - 给子项统一设
height不现实，内容长度不可控 - 用
vertical-align: bottom对浮动元素无效，它只对 inline/inline-block 或 table-cell 生效
基本上就这些。优先用 flex，简洁可靠；若需兼容老浏览器，再考虑 table-cell 或 JS 辅助。浮动布局在多列等高场景下已不是最优解。
