多列布局
在 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。那就很无语了。。