CSS: 让 div 成为最后一个元素

在网页开发中，经常会遇到需要调整 HTML 元素的顺序的情况。使用 CSS，我们可以很容易地将一个 div 元素移动到最后一个位置。本文将介绍几种实现这一目标的方法。

方法一：使用 flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  order: 9999;
}

使用 flexbox 布局，将容器设为 display: flex;，并设置布局方向为竖直方向（column）。将 div:last-child 的 order 属性设置为一个非常大的值，确保它在最后一个位置。

方法二：使用 grid

.container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}

.container > div:last-child {
  order: -1;
}

使用 grid 布局，将容器设为 display: grid;。使用 grid-template-rows 属性根据需要设定行的数量和高度。将 div:last-child 的 order 属性设置为 -1，使其在其他元素之后。

方法三：使用 float

.container {
  width: 100%;
  overflow: hidden;
}

.container > div {
  float: left;
}

.container > div:last-child {
  float: none;
  clear: both;
}

使用 float 属性，将所有的 div 元素设为 float: left;，使它们都浮动在左侧。将最后一个 div 元素的 float 属性设为 none，并使用 clear: both; 清除浮动，使其成为最后一个元素。

以上是几种常见的方式，你可以根据具体情况选择最适合的方法来实现将 div 元素排列在最后的效果。

希望对你有所帮助！