用 display: flex 是解决底部水平排列最干净可控的方式，因浮动脱离文档流且无“贴底”语义；需父容器设 display: flex、align-items: flex-end 及显式高度，IE 兼容需前缀与 fallback。
直接用 display: flex 替代浮动，是解决“底部水平排列”最干净、最可控的方式——浮动本身不支持对齐到容器底部，强行用 float + margin-top: auto 或负边距拼凑，极易失控，且无法响应式适配。
为什么浮动做不到真正的底部水平排列
浮动元素脱离文档流，float: left 或 float: right 只能贴左/右，没有“贴底”语义；即使父容器设了 height，子元素浮动后也不会自动沉到底部。常见错误包括：
- 给浮动子元素加
margin-top: auto—— 无效，浮动不参与 flex/grid 的自动边距计算 - 用
position: absolute配合bottom: 0—— 破坏流式布局，父容器高度塌陷风险高 - 靠
line-height或vertical-align拉动 —— 仅对行内场景有效，块级浮动元素不响应
display: flex 实现底部水平排列的关键写法
核心是把主轴（默认水平）和交叉轴（垂直方向）的对齐逻辑分开控制：
- 父容器必须设
display: flex，不能只加在子元素上 - 用
align-items: flex-end让所有子元素在交叉轴（Y 轴）对齐到底部 - 用
justify-content控制水平方向：如justify-content: center居中，justify-content: space-between两端对齐 - 若父容器高度未显式设定，需确保其有高度来源（如
min-height、内容撑开、或继承父高）
.footer-nav {
display: flex;
align-items: flex-end; /* 所有子项底部对齐 */
justify-content: center; /* 水平居中 */
height: 80px; /* 必须有高度，否则 flex-end 无参照 */
}
.footer-nav > a {
margin: 0 12px;
}
IE 兼容性与 fallback 处理要点
flex 在 IE10–IE11 中需加前缀，且部分属性行为不一致：
-
align-items: flex-end在 IE 中对min-height容器支持不稳定，建议改用固定height或padding-bottom模拟底部空间 - IE10 不支持
justify-content: space-evenly，可用space-between+ 伪元素补间隙 - 若必须兼容 IE9 及以下，
float是唯一选择，但应放弃“严格底部对齐”，改用padding-bottom+text-align: center近似模拟
浮动遗留代码迁移时容易漏掉的点
从 float 切换到 flex 时，常忽略三类隐性依赖：
- 清除浮动的代码（如
overflow: hidden、::after { clear: both }）必须删掉，否则可能干扰 flex 布局高度计算 - 原用于消除 inline-block 空隙的
font-size: 0或注释连写，在 flex 下完全不需要，留着反而导致文字不可见 - 原靠
float实现的图文环绕（如文字绕图）在 flex 下失效，需单独用shape-outside或回归float局部处理
真正难的不是写对 align-items: flex-end，而是确认父容器的高度是否被其他规则（比如 min-height: unset、height: auto）悄悄覆盖——这会导致 flex-end 表现为“顶部对齐”，却查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
