浅谈三栏布局-八种实现（less语法）
前端中布局方式多样，今天我们浅谈一下三栏布局的几种实现方式，希望对你有所帮助。
目录
什么是三栏布局？
1.浮动布局实现：
2.flex布局实现
3.绝对定位实现
4.BFC实现
5.table实现：
6.网格（grid）布局
7.圣杯布局
8.双飞翼布局
总结：
什么是三栏布局？
三栏布局：整体高度已知，左右两边宽度固定，中间内容宽度自适应
三栏布局常见的实现方式：
- 浮动布局
- flex布局
- 绝对定位
- BFC
- table
- 网格（grid）布局
- 圣杯布局
- 双飞翼布局
废话不多说，直接上图，关于三栏布局情况如下图所示
1.浮动布局实现：
HTML代码：
三栏布局-8种实现
left
right
center
CSS代码（less语法）:
*{
margin: 0;
padding: 0;
}
/*1.浮动布局*/
.float{
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: right;
}
.main{
/*不给宽度-自适应*/
height: 100px;
background: #ccc;
}
}2.flex布局实现
HTML代码：
三栏布局-8种实现
left
right
center
CSS代码（less语法）:
/*2.flex布局*/
.flexBox{
display: flex;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
}
.main{
height: 100px;
background-color: #ccc;
flex:1;
}
}
3.绝对定位实现
HTML代码：
三栏布局-8种实现
left
right
center
CSS代码（less语法）:
/*绝对定位*/
.position{
position: relative;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
position: absolute;
left: 0;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
position: absolute;
right:0;
}
.main{
height: 100px;
background: #ccc;
}
}4.BFC实现
HTML代码：
三栏布局-8种实现
left
right
center
CSS代码（less语法）:
/*4.BFC方式*/
.BFC{
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: right;
}
.main{
height: 100px;
background-color: #ccc;
//触发BFC
overflow: hidden;
}
}5.table实现：
HTML代码：
三栏布局-8种实现
left
right
center
CSS代码（less语法）:
/*5.table*/
.tableBox{
// 要设置父元素宽度
width: 100%;
display: table; // 每一个子元素都要设置display:table-cell
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
display:table-cell;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
display:table-cell;
}
.main{
height: 100px;
background-color: #ccc;
display:table-cell;
}
}6.网格（grid）布局
HTML代码：
三栏布局-8种实现
left
center
right
CSS代码（less语法）:
/*6.网格布局*/
.gridBox{
// 只需要父元素设置即可
display: grid;
grid-template-rows: 100px;/*设置行高*/
grid-template-columns: 100px auto 100px;/*设置列数属性*/
text-align: center;
line-height: 100px;
.left{
background-color: #ddd;
}
.right{
background-color: #ddd;
}
.main{
background-color: #ccc;
}
}7.圣杯布局
HTML代码：
三栏布局-8种实现
left
center
right
CSS代码（less语法）:
/*7.圣杯布局*/
.hollyCupBox{
// 父元素也需要两边空出100px
margin: 0 100px;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
position: relative;
left:-100px;
margin-right:-100%;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
position: relative;
right: -100px;
margin-left: -100px;
}
.main{
width: 100%;
height: 100px;
background-color: #ccc;
float: left;
}
}8.双飞翼布局
HTML代码：
三栏布局-8种实现
center
left
right
CSS代码（less语法）:
/*8.双飞翼布局*/
.doubleFly {
line-height: 100px;
text-align: center;
.container {
width: 100%; // 全都是浮动
float: left;
.main {
// 空出两边间隔
margin: 0 100px;
height: 100px;
background-color: #ccc;
}
}
.left {
float: left;
// 关键地方，这个100是整个父元素的宽度
margin-left: -100%;
height: 100px;
background-color: #ddd;
width: 100px;
}
.right {
float: right;
// 关键地方
margin-left: -100px;
height: 100px;
background-color: #ddd;
width: 100px;
}
}总结：
1.圣杯布局、双飞翼布局、flex布局的高度取决于内容区(center部分)，页面的高度取决于内容区
2.绝对定位的内容区高度取决于两边栏的最高点。
3.table-cell布局能让三栏的高度一致，但不能优先渲染 center。
4.网格布局极其强大，但兼容性差
5.浮动：脱离文档流，需要清除浮动；但兼容性比较好
6.绝对定位：快；但是需要处理下面元素的位置
7.Flex：目前比较完美的方案，特别是移动端
8.思考这些布局的优缺点？
9.尝试使用flex+rem布局