这种经典三列布局在网页布局中非常常见，主要区域分为三栏，左右固定，中间自适应，而且在页面渲染的时候，尽可能优先渲染中间主要部分。关于这种布局，最早产生于西方，后来传到中国，扩展成了双飞翼布局。
布局的重点有两点：
1、左右栏固定，中间栏自适应。
2、优先渲染中间栏部分。
圣杯布局
- html结构
<div class="container">
<div class="main">
main
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
html渲染是从上到下的，所以要保证main被优先渲染，就需要将main的位置放到前面。
2. CSS结构分析
1、基本样式
.container{
background-color: #ccc;
}
.main,.left,.right{
min-height: 200px;
}
.main{
width: 100%;
background-color: red;
}
.left{
width: 100px;
background-color: blue;
}
.right{
width: 150px;
background-color: green;
}
2、可以看到，标准流布局之后是这样从上而下的样子，使用浮动来让盒子脱离标准流
.main,.left,.right{
float: left;
}
.container{
/*清除浮动带来的高度塌陷*/
overflow:hidden;
}
效果，是由三行变成了两行，原因是一行放不下，因为main的宽度是父容器的100%.
3、使用margin-left将左右盒子拉至应该在的位置，注意：margin值的百分比是相对父容器的百分比，所以我们让左盒子的margin-left: -100%; 右盒子的margin-left: -右盒子的宽度即可
.left{
margin-left: -100%;
}
.right{
margin-left: -150px;
}
可以看到，左右栏已经拉到了指定位置，但是有一个问题，就是遮挡住了中间栏main里面的内容。
4、给父容器设置padding值来让main的宽度值变小，给左右栏留出足够的位置
.container{
padding: 0 150px 0 100px;
}
效果如下：
使用padding后，因为父容器没有设置宽度，所以内容区域width变小了，main的宽度就小了，两边留出了足够的位置，但是浮动不能越过父容器的padding区域，所以我们还需要用相对位置来移动左右栏的位置。
最终效果如下：
5、合并CSS代码后如下：
.container{
background-color: #ccc;
overflow:hidden;
padding: 0 150px 0 100px;
}
.main,.left,.right{
min-height: 200px;
float: left;
position: relative;
}
.main{
width: 100%;
background-color: red;
}
.left{
width: 100px;
background-color: blue;
margin-left: -100%;
left: -100px;
}
.right{
width: 150px;
background-color: green;
margin-left: -150px;
right: -150px;
}
3、 问题
以上代码就是标准的圣杯布局的原理，但是代码有点啰嗦，而且在浏览器窗口变窄到一定程度之后就会有问题，如下图：
可以看到，布局全都乱掉了，原因是：因为左右盒子设置了相对定位，所以当左右盒子应该在的位置发生重叠时，一行放不下了，就会换行，造成布局混乱，有两种解决办法：
1、给父容器设置最小宽度，这个最小宽度的计算为：left盒子宽度*2 + right盒子宽度
2、使用双飞翼布局
双飞翼布局
主要是不同是给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题。
1、html结构
<div class="container">
<div class="main">
<div class="main-content">
main
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
2、css结构
.container{
overflow: hidden;
}
.main,.left,.right{
min-height: 200px;
float: left;
}
.main{
background-color: red;
width: 100%;
min-height: 220px;
}
.left{
width: 100px;
background-color: blue;
margin-left: -100%;
}
.right{
width: 150px;
background-color: green;
margin-left: -150px;
}
.main-content{
background-color: yellow;
margin: 0 150px 0 100px;
height: 200px;
}
效果如下：
3、其他方案
这种布局除了这种典型的三栏布局，还可以引申至2栏，其他的等等。另外，实现布局的方式也是多种做样，还可以使用弹性布局flex或栅格布局grid来实现，但是兼容性没有这种以上两种方式好。
这边为了解决高度塌陷问题采取的办法不是最好的，因为设置的了父容器的overflow:hidden;如果后面有元素需要使用定位，用负值的margin时，就不能显示了。所以我们改进一下：
然后给父容器加上这个类<div class="container clearfix">
4、注意
上面所有样式中的有关高度height和min-height都是为了展示效果加上的，实际中是子元素自动撑高的。