在平常的开发中，沿着某个容器的底部对齐的场景比较多，实现沿着底部布局的方式很多，常用的方式有一下几种：
一、绝对定位
<div class="container">父容器<div class="footer-absolute">底部</div>
</div><style>html body {margin: 0;padding: 0;}.container {width: 100vw;height: 100vh;text-align: center;background-color: chartreuse}.footer-absolute {width: 100%;height: 48px;line-height: 48px;text-align: center;background-color: aqua;position: absolute;bottom: 0;}</style>绝对定位可以将元素直接定位到整个可视页面的最底部，不受父容器的约束，有些场景使用不受灵活，此处position使用fixed固定定位效果也一样，稍微有区别的就是，使用fixed定位，如果在加一层盒子，使用相对定位，定位效果失效
二、弹性盒子
<div class="container"><div class="footer-flex">底部</div>
</div> .container {width: 100vw;height: 100vh;text-align: center;background-color: chartreuse;display: flex;flex-direction: column-reverse;}.footer-flex {width: 100%;height: 48px;line-height: 48px;text-align: center;background-color: aqua;/* 沿主轴对齐方式，flex-direction: column 从底部向上，flex-direction: row 从右至左，flex-start方向相反 */justify-content: flex-end;}