实现多列列表浮动布局需设 li 为Float:left 并控制宽度与间距，确保“宽度总和 + 间距≤容器宽度”，同时解决父容器塌陷和响应式适配问题，现代开发更推荐css Grid 或 Flexbox。
要实现多列列表的浮动布局，核心是让每个列表项（li）统一设置 float: left，并配合固定宽度和容器宽度控制列数。关键在于“宽度总和 + 间距 ≤ 容器宽度”，否则会自动换行。
1. 基础 html 结构
使用标准无序列表，每个 li 代表一列内容：
- 第 1 项
- 第 2 项
- 第 3 项
- 第 4 项
2. CSS 浮动样式（以 3 列为例）
假设容器宽 900px，每列宽 280px，左右各留 10px内边距，列间用 20px margin 隔开：
立即学习 “ 前端免费学习笔记（深入）”；
.multi-col {
width: 900px;
padding: 0;
list-style: none;
}
.multi-col li {
width: 280px;
float: left;
margin-right: 20px;
box-sizing: border-box;
}
/* 清除最后一列的右 外边距 */
.multi-col li:nth-child(3n) {
margin-right: 0;
}
3. 必须处理的两个问题
- 父容器高度塌陷 ：浮动元素脱离文档流，导致
ul高度为 0。 解决方法 ：在ul上加overflow: hidden或用 伪元素 清除浮动（::after） - 列数动态适配：若想响应式（如小屏变 2 列、手机变 1 列），需配合媒体查询重设
width和margin-right，不能只靠 float 自适应
4. 更稳妥的替代建议
纯 float 布局在现代开发中已较少用于多列列表，因为：
- 需要手动计算宽度与间距，易出错
- 清除浮动 稍繁琐
- 不支持等高、对齐控制弱
推荐优先考虑：CSS Grid（最简洁）或 Flexbox（兼容性更好），例如 Grid 实现 3 列：
.multi-col {
display: grid;
grid-template-columns: repeat(3, 280px);
gap: 20px;
}
