圣杯布局其实是要实现一个三列布局，左右两边宽度固定，中间自适应
圣杯布局实现步骤：
1.将中间内容前置
<div class="container">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
2.每个div设置一个浮动，中间宽度为100%,左右宽度固定
.container{
height: 200px;
overflow: hidden;
}
.container>div{
float: left;
}
.middle{
width: 100%;
background-color: #ff5555;
}
.left{
width: 200px;
background-color: green;
}
.right{
width: 200px;
background-color: blue;
}
3.实现上述两个步骤后，中间内容沾满这个屏幕，这是因为中间内容设置在前面，并且将左右两边的内容挤下去了，
效果图如下：
1.png
这个时候，设置左边的{margin-left：-100%}，“100%”是中间内容的宽度，右边设置{margin-right：-200px}，“200px”是右边的宽度
此时效果图如下：
2.png
虽然左右两列的内容放到了合适的位置上，但是中间内容被覆盖了
4.针对上述问题，设置中间内容的padding {padding：0 200px}，然后在设置相对定位和left .left{position:relative，left：-200px} .right{position:right,right:-200px}
最终效果图如下：
3.png
完整css代码如下：
.container{
height: 200px;
overflow: hidden;
padding: 0 200px;
}
.container>div{
float: left;
}
.middle{
width: 100%;
background-color: #ff5555;
}
.left{
width: 200px;
background-color: green;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
background-color: blue;
margin-left:-200px ;
position: relative;
right: -200px;
}
