使用css浮动可实现多栏布局，通过Float属性使元素左或右排列，配合清除浮动解决高度塌陷，适用于两栏侧边栏+主内容及三栏等宽布局，需注意box-sizing和总宽度控制。
使用CSS浮动（float）实现多栏布局是一种经典且实用的网页布局方式，尤其在早期Web开发中广泛应用。虽然现代布局更多依赖Flexbox和Grid，但理解float布局仍有助于兼容旧项目或特定场景下的灵活处理。
float属性的基本原理
float属性用于让元素脱离正常文档流，并向左或向右移动，直到其边缘紧贴父容器或另一个浮动元素的边缘。常见取值包括left、right、none和inherit。当多个元素设置浮动后，它们会按顺序排列在同一行（只要空间足够），从而形成多栏结构。
关键点：
- 浮动元素会“漂浮”在文档流上方，非浮动块级元素会忽略它的存在
- 文本内容和其他内联元素会围绕浮动元素排列
- 父容器若只包含浮动子元素，通常会发生高度塌陷，需清除浮动
两栏布局实战：侧边栏+主内容区
这是最常见的应用场景之一，比如左侧为导航栏，右侧为主内容区域。
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="sidebar">侧边栏</div> <div class="main-content">主内容</div> </div>
css样式如下：
.sidebar { float: left; width: 200px; background: #eee; } .main-content { margin-left: 200px; /* 避免与侧边栏重叠 */ background: #f9f9f9; } .container::after { content: ""; display: table; clear: both; /* 清除浮动，防止父容器塌陷 */ }
这里通过给侧边栏设固定宽度并左浮动，主内容区用margin留出空间，实现稳定两栏布局。
三栏等宽布局技巧
要实现三个等宽并列的栏目，可将每个栏目设置相同宽度并全部向左浮动。
.column { float: left; width: 33.33%; box-sizing: border-box; padding: 10px; background: #ddd; border: 1px solid #ccc; }
注意事项：
- 使用
box-sizing: border-box确保padding和border包含在width内，避免换行 - 总宽度不能超过100%，否则最后一栏会掉到下一行
- 父容器应有明确宽度，最好设置
overflow: hidden或使用clearfix方法
清除浮动的常用方法
由于浮动元素不占据文档流空间，父容器容易出现高度为0的问题，必须手动清除。
推荐使用伪元素清除法：
.container::after { content: ""; display: table; clear: both; }
也可给父容器添加overflow: hidden触发BFC（块级格式化上下文），达到包含子浮动的效果，但要注意可能裁剪溢出内容。
基本上就这些。float布局虽老，但在简单场景中依然高效可靠。掌握其特性与陷阱，能帮助你在不同项目中灵活应对。不复杂但容易忽略细节。