三栏布局指的是页面分为左中右三个部分，通常左右两侧宽度固定，中间部分宽度随容器大小自适应，是很多后台管理系统、资讯类页面的常用布局形式，下面介绍几种常见的实现方式。
一、浮动布局实现三栏布局
浮动布局是比较早期的布局方案，核心思路是让左右两个侧边栏分别向左和向右浮动，中间内容区通过margin留出两侧空间。
需要注意中间内容区的DOM元素要放在两个浮动元素之后，否则会出现布局错乱。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动三栏布局</title>
<style>
.container {
overflow: hidden; /* 清除浮动 */
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.right {
float: right;
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.center {
margin: 0 210px; /* 左右各留出10px间距 */
height: 300px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<div class="center">中间内容区</div>
</div>
</body>
</html>
浮动布局的优缺点
- 优点：兼容性较好，支持IE8及以上浏览器
- 缺点：需要手动清除浮动，中间内容区不能优先渲染，布局灵活性较差
二、flex弹性布局实现三栏布局
flex布局是现在主流的布局方案，实现三栏布局非常简洁，只需要给容器设置display: flex属性，再给中间区域设置flex: 1即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex三栏布局</title>
<style>
.container {
display: flex;
height: 300px;
}
.left {
width: 200px;
background-color: #f0f0f0;
}
.right {
width: 200px;
background-color: #f0f0f0;
}
.center {
flex: 1; /* 占据剩余所有空间 */
background-color: #e0e0e0;
margin: 0 10px; /* 可选，设置中间与两侧的间距 */
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧栏</div>
<div class="center">中间内容区</div>
<div class="right">右侧栏</div>
</div>
</body>
</html>
flex布局的优缺点
- 优点：代码简洁，不需要考虑浮动问题，中间内容区可以优先放在DOM前面实现优先渲染，布局灵活
- 缺点：兼容性稍差，不支持IE9及以下浏览器
三、grid网格布局实现三栏布局
grid是css最新的网格布局方案，非常适合实现这种行列规整的布局，通过定义网格列宽即可快速完成。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid三栏布局</title>
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左右固定200px，中间自适应 */
height: 300px;
gap: 10px; /* 网格间距 */
}
.left {
background-color: #f0f0f0;
}
.center {
background-color: #e0e0e0;
}
.right {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧栏</div>
<div class="center">中间内容区</div>
<div class="right">右侧栏</div>
</div>
</body>
</html>
grid布局的优缺点
- 优点：代码最简洁，布局能力强大，可以轻松实现复杂的网格结构
- 缺点：兼容性较差，不支持IE浏览器，旧版本浏览器支持度低
四、三种方案对比
| 布局方案 | 兼容性 | 代码复杂度 | 是否支持中间优先渲染 |
|---|---|---|---|
| 浮动布局 | IE8+ | 中等 | 否 |
| flex布局 | IE10+ | 低 | 是 |
| grid布局 | 现代浏览器 | 极低 | 是 |
实际开发中可以根据项目的浏览器兼容要求选择合适的方案，如果需要兼容旧浏览器可以选择浮动布局，现代项目优先选择flex或grid布局。