通过float属性实现多列布局，使块级元素并排显示。设置列宽并应用float:left，确保容器足够宽，并用overflow:hidden或clearfix清除浮动防止塌陷。结合媒体查询可实现响应式堆叠。尽管现代布局推荐flex或grid，但掌握浮动仍有助于维护旧项目。
在CSS中实现多列布局的浮动，主要是通过 float 属性来让多个列并排显示。虽然现代布局更推荐使用 Flexbox 或 Grid，但理解浮动布局对兼容旧项目仍有帮助。
使用 float 实现多列布局
将多个块级元素（如 div）设置为浮动，可以让它们在同一行内从左到右排列，前提是容器宽度足够。
常见做法：- 给每一列设置固定或百分比宽度
- 使用 float: left 让列向左靠拢
- 确保父容器有足够的宽度容纳所有列
- 清除浮动以防止布局塌陷
示例代码：
.container {
width: 100%;
overflow: hidden; /* 防止父容器高度塌陷 */
}
.column {
width: 33.33%;
float: left;
box-sizing: border-box;
padding: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
处理浮动带来的问题
浮动元素会脱离正常文档流，可能导致父容器无法正确包裹子元素。
立即学习“前端免费学习笔记（深入）”；
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
- 给父容器添加 overflow: hidden
- 使用 clearfix 技巧清除浮动
- 在最后一列后添加一个清除元素
响应式多列浮动布局
在小屏幕上，可以将多列改为堆叠排列。
通过媒体查询调整：
@media (max-width: 768px) {
.column {
width: 100%;
float: none;
}
}
这样在移动设备上，原本并排的列会垂直堆叠，提升可读性。
基本上就这些。虽然 float 曾是主流布局方式，但现在建议优先考虑 flex 或 grid，它们更简单、强大且无需清除浮动。但在维护老项目时，掌握浮动布局仍有必要。
