CSS 如何垂直对齐浮动的 div 到底部

在本文中，我们将介绍如何使用 CSS 实现将浮动的 div 元素垂直对齐到底部的方法。

阅读更多：CSS 教程

背景

在 Web 开发中，我们经常会使用浮动的 div 元素来创建网站的布局。然而，当需要垂直对齐浮动的 div 元素到底部时，往往会遇到一些困难。CSS 提供了多种方法来解决这个问题，我们将逐一进行介绍。

使用 Flexbox 垂直对齐浮动的 Div 到底部

Flexbox 是 CSS3 中引入的一种强大的布局模型，它可以方便地实现各种复杂的布局需求。下面是一种使用 Flexbox 来垂直对齐浮动的 div 到底部的方法：

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
}

.div1, .div2 {
  float: left;
}

.div1 {
  width: 200px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

在上面的例子中，我们创建了一个容器 div，并且将其样式指定为 display: flex;，这样容器内的元素会按照 flex 的规则进行布局。通过设置容器的 justify-content: flex-end; 属性，可以将浮动的 div 元素垂直对齐到容器的底部。

使用 Table 垂直对齐浮动的 Div 到底部

另一种常用的方法是使用 table 布局来垂直对齐浮动的 div 元素到底部。下面是一个示例：

.container {
  display: table;
  width: 100%;
  height: 100vh;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: bottom;
}

.div1, .div2 {
  float: left;
}

.div1 {
  width: 200px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

在上面的例子中，我们创建了一个 table 布局，并设置容器 div 的样式为 display: table;，并且指定宽度和高度。然后，我们使用 display: table-row; 和 display: table-cell; 来分别创建行和单元格。通过设置单元格的 vertical-align: bottom; 属性，可以将浮动的 div 元素垂直对齐到底部。

使用绝对定位垂直对齐浮动的 Div 到底部

还可以使用绝对定位来垂直对齐浮动的 div 元素到底部。下面是一个示例：

.container {
  position: relative;
  height: 100vh;
}

.div1, .div2 {
  float: left;
}

.div1 {
  width: 200px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

在上面的例子中，我们创建了一个相对定位的容器 div，并设置其高度为 100vh（100% 的视窗高度）。然后，我们设置浮动的 div 元素的样式为 position: absolute;，并使用 bottom: 0; 将其固定在容器的底部。