HTML让盒子纵向排列

HTML本身并没有直接提供让元素按纵向排列的功能，但通过CSS布局可以实现。如果你想要使元素从上到下排列，你可以利用`display: flex`、`grid` 或者传统的`float` 和 `clear` 属性配合。

1. **Flexbox**（弹性盒模型）: 使用`.flex-direction: column`可以让元素从上至下堆叠，每个孩子元素会在其容器内占据一行。

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

2. **Grid**（网格布局）: 如果你想创建一个二维网格，可以用`display: grid`，设置行数(`grid-template-columns`)为auto（自动分配高度），列数(`grid-template-rows`)为指定的高度，如`repeat(auto-fill, minmax(100px, 1fr))`。

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

3. **传统方法** (仅适用于单列布局)：如果使用浮动（`float`）和清除（`clear`），需要结合一些技巧，如`float:left; clear:both`或`position:relative`配合`top`。

注意，在实际应用中，推荐使用现代的CSS布局技术，因为它们更强大且兼容性更好。