圣杯布局即三列结构，左右两边定宽，中间自适应，能够根据屏幕大小做出调整。
实现方式如下：
float+margin负值
首先介绍一下margin负值：
margin-top/margin-left负值会将元素向上/向左拖拽；
margin-bottom/margin-right负值则元素本身不变，会让其下边/右边元素上移/左移。
1.给出html结构，这里需要注意的地方是要将中间center元素放到最前面。
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
2.写footer、header结构，横向撑满屏幕。
3.给出中间三列的结构，注意要将center设置为100%；
4.此时left和right会被挤到下一行，此时是和footer一行的，需要清除footer浮动，让其在最下面独占一行。
#footer {
clear: both;
}
5.下面需要设置让left和center以及right占一行了。
left:设置margin-left： -100%，拉回行头。
right:设置margin-left: -200px，拉到行尾。
6.设置padding，解决left和right覆盖center的问题。
padding 左侧设置left宽度，右侧设置right宽度，上下都为0；
注意要给container设置overflow:hidden，可以形成BFC撑开文档。
#container {
padding: 0 200px 0 150px;
overflow: hidden;
}
7.接下来需要设置定位，因为left和right挤到中间了，需要把他们拉回去。 这里使用相对定位来解决。
只需要将left: left: -150px，150px为left自身宽度;
将right: right:-200px,200px为right自身宽度。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
body {
min-width: 550px;
}
#header,#footer {
background-color: gray;
text-align: center;
height: 100px;
line-height: 100px;
}
#container {
padding: 0 200px 0 150px;
overflow: hidden;
}
.column {
height: 250px;
float: left;
position: relative;
}
#center {
width: 100%;
background-color:tomato;
}
#left {
margin-left: -100%;
width: 150px;
left: -150px;
background-color: blue;
}
#right {
margin-left: -200px;
width: 200px;
right: -200px;
background-color: green;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
