使用float可实现传统侧边栏布局。1. 搭建包含侧边栏和主内容区的HTML结构；2. 侧边栏设float:left，主内容区用margin-left避让；3. 右侧边栏则设float:right，主内容区用margin-right留空；4. 需清除浮动防止父容器塌陷，可通过overflow:hidden或伪元素实现。该方法兼容性好，适用于简单多栏布局。
使用 float 制作侧边栏布局是一种传统但有效的方法，适用于简单的两栏或三栏页面结构。通过让一个元素向左或向右浮动，另一个元素自动环绕或排列在旁边，就能实现侧边栏效果。
1. 基本HTML结构
先搭建基础的HTML结构，通常包括一个侧边栏和一个主内容区：
主内容区域
2. 使用 float 实现左右布局
将侧边栏向左浮动，主内容区自然流到右侧：
.container {
width: 100%;
overflow: hidden; /* 防止父容器塌陷 */
}
.sidebar {
width: 200px;
background-color: #f4f4f4;
float: left;
padding: 15px;
}
.main-content {
margin-left: 200px; / 留出侧边栏的空间 /
padding: 15px;
background-color: #ddd;
}
说明： 侧边栏设置 float: left 后脱离正常文档流，主内容用 margin-left 避开侧边栏宽度，避免重叠。
立即学习“前端免费学习笔记（深入）”；
3. 右侧边栏布局
如果想让侧边栏在右边，可以改为向右浮动：
.sidebar {
width: 200px;
float: right;
background-color: #f4f4f4;
padding: 15px;
}
.main-content {
margin-right: 200px;
padding: 15px;
background-color: #ddd;
}
这时主内容区靠左，侧边栏浮在右边，使用 margin-right 给侧边栏留空间。
4. 注意事项与清除浮动
浮动会导致父容器高度塌陷，需要清除浮动：
.container::after {
content: "";
display: table;
clear: both;
}
基本上就这些。float 虽然老派，但在兼容性要求高或不使用 Flex/Grid 的场景中依然实用。关键是控制好宽度、浮动方向和外边距，避免内容重叠。
