最直接有效的方式是父容器设 position: relative，色块设 position: absolute 和 bottom: 0；flex 布局下推荐用 flex-direction: column + margin-top: auto；vertical-align 对块级色块无效。
用 position: absolute 把色块钉在容器底边
最直接有效的方式是给色块加 position: absolute，再配合 bottom: 0。但前提是它的父容器得是 position: relative（或 absolute/fixed），否则 bottom: 0 会相对于整个视口定位，而不是你想要的“在父容器最下面”。
常见错误现象：bottom: 0 没生效、色块飞到页面底部、多个色块堆叠错位。
- 父容器必须设置
position: relative（哪怕只是占个位） - 色块本身需设
width（否则可能收缩成内容宽） - 如果父容器高度不固定，且希望色块始终贴底（即使内容少），这个方案依然可靠
Flex 布局里用 margin-top: auto 推到底部
当父容器是 display: flex 且主轴为垂直方向（flex-direction: column）时，给色块加 margin-top: auto 是更干净的解法——它会把前面所有兄弟元素挤上去，把色块“顶”到最后。
使用场景：卡片、表单页、侧边栏底部固定区域。
一套在西安二手网完全功能版基础上简化而成的，是一套绿色、轻便（快捷、方面、简单）的（二手）信息发布系统其主要功能如下:1.无须注册，就可以发布信息2.可以发布图片(标题带标记)，最新图片信息显示3.最新信息首页显示4.搜索功能5.友情链接模块6.本站公告模块7.首页热点广告&banner广告管理8.信息ip归属查询功能9.手机归属查询功能10.信息发布回复功能管理帐号及密码为admin
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确的
flex-direction: column - 色块不能设
flex: 0 0 auto以外的弹性属性（否则margin-top: auto可能被忽略） - 兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+），但 IE10 需要
-ms-flex前缀
避免踩 vertical-align 的坑
vertical-align 只对 inline 元素和 table-cell 生效，对块级色块（比如 <div>）完全无效。很多人搜“HTML5 色块底部对齐”，误以为这是解决方案，结果调半天没反应。
<p>典型错误操作：</p>
<ul><li>给 <code><div class="color-block"> 加 <code>vertical-align: bottom → 无效果
<span></span> 再加 vertical-align → 容易受行高、字体影响，位置飘忽float 和 vertical-align → 布局失控风险高响应式下保持底部位置别断掉
用 position: absolute 时，如果父容器高度随屏幕变小而塌缩（比如媒体查询里改了 min-height），色块可能被截断或溢出。Flex 方案此时更稳，但也要注意父容器是否设置了 min-height 或 height。
- 绝对定位方案：给父容器加
min-height: 100vh（慎用，可能造成滚动条多余） - Flex 方案：父容器设
min-height: 100vh+flex-direction: column，色块用margin-top: auto，最稳妥 - 不要依赖
vh单位做色块高度（iOS Safari 中100vh会包含地址栏，导致计算偏差）
relative 或 flex 就一定生效，得看它有没有被其他样式（比如 display: contents、transform）悄悄破坏。
