使用 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>
.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 布局虽老，但在简单场景中依然高效可靠。掌握其特性与陷阱，能帮助你在不同项目中灵活应对。不复杂但容易忽略细节。
