多列布局

在 Flexbox 和 Grid 布局引入之前，确实主要通过使用 float 属性来实现块元素的横向排列。float 属性最初设计用于图文混排，但由于它允许元素浮动并靠近其容器的边缘，因此人们开始使用它来创建多列布局。

使用 float 时，通常会将元素浮动到左边或右边，然后通过为容器设置适当的宽度，使得元素在同一行中水平排列。这样的布局虽然实现了横向排列，但也带来了一些问题，如清除浮动（clearing floats）和容器高度塌陷等，因此可能需要一些额外的样式来解决这些问题。

示例代码可能如下所示：

/* 父容器 */
.container {
  width: 100%;
  overflow: hidden; /* 清除浮动的一种方式 */
}

/* 横向排列的块元素 */
.block {
  width: 25%; /* 或其他适当的宽度 */
  float: left;
  box-sizing: border-box; /* 防止边框和填充导致宽度超过设定的百分比 */
  margin: 0; /* 清除浮动的一种方式 */
}

这种方法虽然在一些情况下可以工作，但随着布局需求的增加和对更复杂布局的需求，Flexbox 和 Grid 布局更成为了更灵活、强大和易用的选择。它们提供了更直观和更强大的布局工具，不需要使用 float 或处理浮动带来的问题。

忘记float 除非你还用兼容IE。那就很无语了。。