使用float实现左右两栏布局：左侧固定宽度左浮动，主内容区通过margin-left留白并排显示；2. 通过overflow:hidden清除浮动防止塌陷；3. 右侧栏靠右时可利用BFC特性使主内容区自适应剩余空间；4. 注意兼容性与现代布局的替代选择。
使用 CSS 浮动（float）实现左右两栏布局是一种传统但有效的方法，适用于不使用 Flexbox 或 Grid 的场景。核心思路是让左侧元素向左浮动，右侧元素向右浮动或紧跟在左侧之后，通过设置合适的宽度来并排显示。
1. 基本 HTML 结构
先构建两个并列的栏目容器：
<div class="container"><div class="left-sidebar">左侧栏</div>
<div class="main-content">主内容区</div>
</div>
2. 使用 float 实现布局
为两个栏目设置浮动和宽度：
.container {overflow: hidden; /* 清除浮动 */
}
.left-sidebar {
width: 200px;
float: left;
background-color: #f0f0f0;
}
.main-content {
margin-left: 200px; /* 避开左侧栏宽度 */
background-color: #d0e0f0;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- float: left 让左侧栏靠左排列
- margin-left 给主内容区留出左侧空间，避免文字环绕
- overflow: hidden 在父容器上清除浮动影响，防止高度塌陷
3. 右侧栏在右的布局方式
如果你想让右侧栏靠右，左侧自适应：
.left-sidebar {float: left;
width: 200px;
}
.main-content {
overflow: hidden; /* 利用 BFC 特性自适应剩余空间 */
background-color: #d0e0f0;
}
这里利用了 overflow: hidden 创建 BFC（块级格式化上下文），使主内容区不会与浮动元素重叠，自动填充剩余宽度。
4. 注意事项
- 始终考虑清除浮动，避免影响后续元素
- 设置固定宽度时注意父容器是否足够宽
- 浮动布局在现代开发中逐渐被 Flex 和 Grid 替代，但在兼容旧浏览器时仍有价值
基本上就这些，简单有效，适合静态布局场景。
