float布局通过浮动元素实现多栏结构，1. float使元素脱离文档流并左/右排列；2. 两栏布局中侧边栏浮动，内容区用margin留出空间；3. 三栏布局左右侧栏分别浮动，中间区域用margin避开；4. 需清除浮动防止父容器塌陷，常用伪元素法。
使用 float 实现布局是早期网页设计中常用的方法，虽然现在更推荐使用 Flexbox 或 Grid，但理解 float 布局对兼容旧代码或特定场景仍有价值。
1. float 的基本原理
float 属性让元素脱离正常文档流，并向左或向右移动，直到其边缘紧贴父容器或另一个浮动元素的边缘。
常用值：- float: left; — 元素向左浮动
- float: right; — 元素向右浮动
- float: none; — 默认值，不浮动
2. 实现两栏布局
常见用法是创建左侧固定宽度、右侧自适应的两栏布局。
示例代码：<div class="container"> <div class="sidebar">侧边栏</div> <div class="content">内容区</div> </div>
.container {
width: 100%;
overflow: hidden; /* 触发BFC，防止外边距塌陷 */
}
.sidebar {
width: 200px;
float: left;
background: #ddd;
}
.content {
margin-left: 200px; /* 为浮动留出空间 */
background: #f0f0f0;
}
这里将侧边栏左浮动，内容区通过 margin 留白避免重叠。
立即学习“前端免费学习笔记（深入）”；
3. 实现三栏布局（两侧固定，中间自适应）
通过左右分别浮动两个侧边栏，中间区域用 margin 挤出空间。
.sidebar-left {
width: 150px;
float: left;
background: #cfc;
}
.sidebar-right {
width: 150px;
float: right;
background: #ccf;
}
.main-content {
margin: 0 150px;
background: #eee;
}
左右侧栏分别向两侧浮动，主内容区通过左右 margin 避开它们。
4. 清除浮动的影响
浮动元素会脱离文档流，可能导致父容器高度塌陷。需要清除浮动。
常用方法：-
使用 clear 属性：在浮动元素后加一个空元素并设置
clear: both; -
触发 BFC：给父容器设置
overflow: hidden;或display: flow-root; - 伪元素清除法（推荐）：
.container::after {
content: "";
display: table;
clear: both;
}
基本上就这些。float 布局虽能实现简单结构，但需手动处理清除和空间分配，不如现代布局方式灵活。了解它有助于维护老项目，新项目建议优先考虑 Flexbox 或 CSS Grid。
