CSS float:left 多列布局示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      background-color: #e8e8e8;
    }
    .box {
      width: 100px;
      height: 100px;
      margin: 5px;
      float: left; /* 多个盒子向左浮动，排成一行 */
      background: #2196F3;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    /* 清除浮动（解决父容器高度塌陷问题） */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>