推荐使用Flex布局实现两栏，代码简洁且易维护；2. Grid适合复杂或未来项目，一行定义列宽；3. Float为传统方法，兼容老浏览器但需清除浮动。
实现两栏布局在CSS中有多种方式，以下是几种简单且常用的方法，适合不同场景快速上手。
1. 使用 float 布局（传统方法）
通过浮动让两个元素并排显示，适合兼容老浏览器的项目。
说明：左栏设置固定宽度并左浮动，右栏自适应剩余宽度。
.left {
float: left;
width: 200px;
background: #eee;
}
.right {
margin-left: 200px;
background: #f9f9f9;
}
使用 float 后需要清除浮动，避免影响后续布局。可给父容器添加 overflow: hidden 或使用 clearfix。
立即学习“前端免费学习笔记（深入）”；
2. 使用 Flex 布局（推荐）
Flex 是现代布局首选，代码简洁，控制灵活。
父容器设为 flex，左栏固定宽度，右栏自动撑开。
.container {
display: flex;
}
.sidebar {
width: 200px;
background: #ddd;
}
.main {
flex: 1;
background: #f0f0f0;
}
- 无需计算 margin，自动分配空间
- 垂直居中、对齐更方便
- 响应式调整容易
3. 使用 CSS Grid 布局（现代方案）
Grid 更适合复杂布局，但两栏也极简。
写法：用 grid-template-columns 定义两列比例。
.container {
display: grid;
grid-template-columns: 200px 1fr;
}
- 一行代码定义列宽
- 支持多行多列扩展
- 适合未来项目
基本上就这些。日常开发推荐使用 Flex，简单高效；若项目支持现代浏览器，Grid 也很优雅。float 方法了解即可，维护旧项目时会用到。
