vertical-align: bottom 仅对 inline、inline-block、table-cell 等参与行内格式化上下文的元素生效；对块级元素无效，常见误用是错加在父容器上；推荐 table-cell + vertical-align、flex align-items 或 absolute 定位方案。
vertical-align: bottom 在 inline 元素上才生效
常见误用场景：想让一个 这是兼容性好、语义清晰、无需 JS 的纯 CSS 方案，适合固定高度容器内的单行文字底部对齐。 如果父容器是 立即学习“前端免费学习笔记（深入）”； 当容器高度固定、且允许文字脱离正常流时，绝对定位是最精准的控制方式，尤其适合多行文字或需要像素级偏移的场景。 真正容易被忽略的是：vertical-align: bottom 不是万能的“让文字贴底”工具，它只对 display 值为 inline、inline-block、table-cell 等参与行内格式化上下文（IFC）的元素起作用。直接给 这类块级元素设 vertical-align: bottom 完全无效。 文字在父容器底部对齐，却把 vertical-align 加在父容器上 —— 实际该加在 自身，并确保父容器是 table-cell 或启用行内布局。用 display: table-cell + vertical-align: bottom 最直接
display: table-cell 和明确高度（如 height: 100px）vertical-align: bottom（作用于该单元格自身）display: inline 即可（如 或纯文本）.container {
display: table-cell;
height: 120px;
vertical-align: bottom;
border: 1px solid #ccc;
}Flexbox 中 align-items: flex-end 更现代但要注意方向
display: flex，align-items: flex-end 才是让子元素（包括文字）在交叉轴末端对齐的正确方式 —— 注意：这取决于 flex-direction：
flex-direction: row → 交叉轴是垂直方向 → align-items: flex-end = 底部对齐column，交叉轴变成水平方向，此时 align-items: flex-end 就是右对齐了vertical-align
.container {
display: flex;
height: 120px;
align-items: flex-end;
justify-content: center; /* 可选：水平居中 */
}absolute 定位 + bottom: 0 是最可控但需脱离文档流
position: relative
）设 position: absolute; bottom: 0;left: 50%; transform: translateX(-50%);
.container {
position: relative;
height: 120px;
border: 1px solid #ccc;
}
.text {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}vertical-align 的行为始终依赖上下文 —— 行高、父容器的字体大小、是否设置了 line-height，都会影响最终视觉位置。调试时别只盯着目标元素，得看它所在的那一整行（line box）里还有谁。
