css三部分纵向排列

CSS是现在网页制作中必不可少的一部分，它可以对网页上的内容进行样式化处理，使页面看起来更加美观、舒适。CSS的布局方式有很多种，其中纵向排列是比较常见的一种。以下是纵向排列的三种实现方式。

//方法一：使用display:flex属性
.container {
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1;
}

//方法二：使用position属性
.container {
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
}

//方法三：使用float属性
.container:after {
  content: "";
  display: block;
  clear: both;
}

.item {
  float: left;
} 

首先，第一种方法是使用了flex布局，通过设置容器的flex-direction属性为column，使子元素在竖直方向上排列。然后，通过给子元素设置flex: 1属性，使子元素自动填满容器的剩余空间，从而实现纵向排列的效果。

第二种方法是使用了position布局，在容器上设置position: relative属性，使得子元素相对于容器进行定位。然后，通过给子元素设置position: absolute属性，并分别设置top和bottom属性的值为0，使其填满整个容器，从而实现纵向排列。

最后，第三种方法是使用了float布局，在容器最后添加一个clearfix元素，在子元素上设置float: left属性，使得子元素能够左浮动。这样子元素就会按照顺序从上到下进行排列，从而实现纵向排列。