使用float属性可实现多列布局，通过设置float:left使元素并排显示，需控制宽度与间距，并用伪类.clearfix解决父容器高度塌陷问题，结合媒体查询实现响应式适配，在现代开发中推荐优先使用Flexbox或Grid布局。
在CSS中实现多列浮动布局，主要通过 float 属性将多个块级元素并排排列。虽然现代开发更推荐使用 Flexbox 或 Grid 布局，但理解浮动布局仍有实际意义，尤其在维护旧项目时。
1. 使用 float 实现多列布局
给需要并排显示的元素设置 float: left，并确保它们的总宽度不超过父容器。
示例代码：列1列2列3
.container {
width: 100%;
overflow: hidden; /* 触发BFC，防止高度塌陷 */
}
.column {
width: 30%;
float: left;
margin-right: 3.33%; /* 列间距 */
}
.column:last-child {
margin-right: 0; /* 最后一列无右边距 */
}
width: 100%;
overflow: hidden; /* 触发BFC，防止高度塌陷 */
}
.column {
width: 30%;
float: left;
margin-right: 3.33%; /* 列间距 */
}
.column:last-child {
margin-right: 0; /* 最后一列无右边距 */
}
2. 清除浮动的影响
浮动元素会脱离文档流，可能导致父容器高度塌陷。解决方法有几种：
- 给父容器设置 overflow: hidden
- 使用伪类 ::after 添加清除浮动
- 添加额外的清除元素（不推荐）
.container::after {
content: "";
display: table;
clear: both;
}3. 响应式适配建议
在小屏幕上，多列浮动可能显示错乱，需结合媒体查询调整。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.column {
width: 100%;
margin-right: 0;
float: none;
}
}这样在移动设备上，列会垂直堆叠，提升可读性。
基本上就这些。浮动布局虽老，但原理简单，适合基础场景。注意清除浮动和响应式处理，就能稳定使用。现在多数情况建议改用 Flex 或 Grid，更简洁强大。
