浮动布局通过float属性实现左右固定、中间自适应，需清除浮动；2. Flex布局设display:flex，左右定宽，中间flex:1，推荐使用；3. Grid布局用display:grid和grid-template-columns:200px 1fr 200px，简洁高效；4. 圣杯与双飞翼布局为经典技巧，现多被Flex和Grid取代；日常开发建议优先选择Flex或Grid，兼顾兼容性与维护性。
三栏布局是网页设计中常见的布局方式，通常用于实现左右固定宽度、中间自适应的页面结构。在HTML和CSS中，有多种方法可以实现三栏布局，每种方法都有其适用场景和优缺点。
1. 浮动布局（Float Layout）
使用 float 属性可以让元素脱离文档流并靠左或靠右排列，适合实现传统三栏布局。
基本结构：- 左栏设置 float: left，固定宽度
- 右栏设置 float: right，固定宽度
- 中间栏通过左右margin留出空间，实现自适应
示例代码：
<div class="container"> <div class="left">左栏</div> <div class="right">右栏</div> <div class="center">中间栏</div> </div>CSS：
.left {
float: left;
width: 200px;
background: #ccc;
}
.right {
float: right;
width: 200px;
background: #ddd;
}
.center {
margin: 0 200px;
background: #eee;
}
.container::after {
content: "";
display: table;
clear: both;
}
注意：需清除浮动，防止父容器塌陷。
立即学习“前端免费学习笔记（深入）”；
2. Flex 布局（推荐）
Flexbox 是现代布局方案，能轻松实现等高、对齐和自适应。
实现方式：- 父容器设置 display: flex
- 左右栏设置固定宽度
- 中间栏设置 flex: 1，自动占满剩余空间
示例代码：
<div class="flex-container"> <div class="flex-left">左栏</div> <div class="flex-center">中间</div> <div class="flex-right">右栏</div> </div>CSS：
.flex-container {
display: flex;
}
.flex-left, .flex-right {
width: 200px;
background: #ccc;
}
.flex-center {
flex: 1;
background: #eee;
}
优点：无需清除浮动，天然等高，响应式友好。
3. Grid 布局（现代高效）
CSS Grid 提供二维布局能力，适合复杂结构。
实现方法：- 父容器设置 display: grid
- 使用 grid-template-columns 定义三列
示例：
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 10px;
}
说明：1fr 表示中间列占据剩余空间，简洁直观。
4. 圣杯布局与双飞翼布局（经典技巧）
早期为解决中间自适应而设计的技巧，现在较少使用，但有助于理解布局原理。
- 圣杯布局：通过父容器 padding 留出空间，子元素 position: relative 调整位置
- 双飞翼布局：中间内容额外嵌套一层，通过 margin 挤开左右栏
这些方法兼容性好，但代码较复杂，已被 Flex 和 Grid 取代。
基本上就这些常见方式。日常开发推荐使用 Flex 或 Grid，简洁高效，维护性强。选择哪种方式取决于项目兼容性要求和布局复杂度。
