[分享]css两个块状元素的垂直排布

在CSS中，我们可以使用display属性来定义元素的显示方式。其中，块状元素和行内元素是最基本的分类。/ 定义一个块状元素 / .block { display: block; } / 定义一个行...

在CSS中，我们可以使用display属性来定义元素的显示方式。其中，块状元素和行内元素是最基本的分类。

/* 定义一个块状元素 */
.block {
  display: block;
}

/* 定义一个行内元素 */
.inline {
  display: inline;
} 

块状元素和行内元素的显示方式有很大的区别。块状元素会将它后面的元素全部挤下去，而行内元素则会与其他元素一起排列。

如果我们将两个块状元素水平排列，是没有问题的。但是，如果我们想让它们垂直排列呢？这时，我们就需要用到CSS的另一个属性：float。

/* 块状元素1 */
.block1 {
  display: block;
  float: left;
}

/* 块状元素2 */
.block2 {
  display: block;
  float: left;
} 

通过给块状元素添加float属性，我们就可以让它们水平排列了。但是，它们还是在同一行，没有垂直排布。

为了让它们垂直排布，我们可以为它们设置宽度，并给它们添加清除浮动的样式。

/* 块状元素1 */
.block1 {
  display: block;
  float: left;
  width: 50%;
}

/* 块状元素2 */
.block2 {
  display: block;
  float: left;
  width: 50%;
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
} 

最后，我们再在容器上添加clearfix类名，就可以让它们完美地垂直排布了。