CSS 两栏布局
解释 CSS 两栏布局的常见实现方案及其适用场景。
#tech / dev / frontend
#type / concept
#status / growing
#resource / css
[!info] related notes
CSS 两栏布局
这篇笔记回答一个问题：如何实现左侧固定宽度、右侧自适应的两栏布局。
一句话定义
两栏布局指页面分为两列，其中一列宽度固定，另一列自动填充剩余空间。
核心方案
1. Flex 布局（推荐）
最现代、最直观的方案。
.container {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0;
}
.right {
flex: 1;
}优点：语义清晰，代码简洁，兼容性好。面试首选。
2. BFC + float
左侧 float 脱离文档流，右侧通过 overflow: hidden 触发 BFC 形成独立区域。
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden;
}优点：兼容老浏览器。缺点：语义不够直观。
3. calc 计算
右侧宽度用 calc(100% - 固定宽度) 计算。
.left {
float: left;
width: 200px;
}
.right {
width: calc(100% - 200px);
float: left;
}优点：直观。缺点：需要知道固定宽度具体值。
4. Grid 布局
.container {
display: grid;
grid-template-columns: 200px 1fr;
}优点：代码最少，二维布局能力强。缺点：兼容性不如 Flex。
常见边界
- 左侧内容超出固定宽度时需要 overflow: hidden 或 text-overflow 处理
- 移动端通常需要改为单栏堆叠（媒体查询）
- 如果两侧都需要自适应比例，Grid 更合适
最小例子
<div class="container">
<div class="left">固定 200px</div>
<div class="right">自适应剩余空间</div>
</div>.container { display: flex; }
.left { width: 200px; flex-shrink: 0; }
.right { flex: 1; }