float 无法实现垂直底部对齐，因其仅支持 left/right 水平浮动；需用 position: relative + bottom 计算偏移，或更优解——改用 Flexbox 的 align-items: flex-end。
浮动元素本身无法通过 float 实现“垂直靠下”排列——因为 float 只控制水平方向（left/right），垂直位置完全由文档流或父容器高度决定。所谓“靠下”，实际是让浮动元素在父容器内底部对齐，必须借助其他定位机制配合。
为什么 float 不能直接实现底部对齐
浮动元素脱离标准流后，会向上/向左/向右“漂”，但不会向下“沉”。它仍受其在源码中出现位置、行框高度、父容器 line-height 和清除行为影响。即使父容器有足够高度，float: left 的元素默认仍贴着顶部对齐，没有 float: bottom 这种写法。
-
float的取值只有none、left、right、inherit，不支持垂直方向 - 浮动元素的垂直位置由它所在“行框”的基线决定，而该行框高度通常由内容或
line-height控制，非显式可控 - 试图用
margin-top或padding-bottom推动浮动元素到底部，容易破坏兄弟元素环绕逻辑，且响应性差
用 position: relative + bottom 微调（适用于已知高度场景）
若父容器高度固定，且浮动元素自身高度明确，可对浮动元素加相对定位，用 bottom 拉到底部。但注意：这仅改变视觉位置，不释放文档流空间，可能遮挡后续内容。
- 父容器需设
position: relative（为子元素提供定位上下文） - 浮动元素保留
float: left或float: right，再加position: relative; bottom: Xpx; - 计算公式：`bottom = 父容器高度 - 浮动元素高度`，例如父高 200px、元素高 40px →
bottom: 160px - 示例：
.parent { position: relative; height: 200px; } .floated { float: left; width: 100px; height: 40px; background: #ccc; position: relative; bottom: 160px; }
更可靠方案：放弃 float，改用 Flex + align-items: flex-end
如果你真正需要的是“子元素在容器内垂直底部对齐”，float 是过时且错误的技术选型。现代布局应直接用 Flexbox，语义清晰、无清除困扰、天然支持垂直对齐。
立即学习“前端免费学习笔记（深入）”；
- 移除所有
float声明，把父容器设为display: flex - 用
align-items: flex-end让子项沿交叉轴（即垂直方向）对齐到底部 - 若需水平排列多个底部对齐项，加
flex-direction: row（默认值）；若需单列堆叠再底部对齐，用flex-direction: column+justify-content: flex-end - 示例：
.flex-parent { display: flex; align-items: flex-end; height: 200px; } .flex-child { width: 100px; height: 40px; background: #ccc; }
兼容老浏览器时的 fallback（IE9–）
若必须支持 IE9 及以下，flex 不可用，可退回到 table-cell 模拟底部对齐：
- 父容器设
display: table; height: 200px; - 子容器（包裹浮动元素的 wrapper）设
display: table-cell; vertical-align: bottom; - 原浮动元素放在此 wrapper 内，取消
float，改用display: inline-block或保持块级即可 - 缺点：table 布局语义失真，嵌套层级增加，且
table-cell不支持 margin，需用 padding 调整间距
真正要注意的不是“怎么让 float 靠下”，而是“为什么还在用 float 做垂直对齐”——这个思路本身已经偏离现代 CSS 布局原则。一旦你开始手动计算 bottom 值或嵌套 table-cell，就该停下来问问：这个需求是否本就可以用一行 align-items: flex-end 干净解决？
