三 经典圣杯三列布局
圣杯与双飞翼类型，区别在于，圣杯使用padding，双飞翼使用margin
因为圣杯不适用外边距之类的操作，所以不需要给center块套壳
原始结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2.经典的三列圣杯</title>
<style>
/* 先给头部和底部设置一下基本样式 */
.header,.footer{
/*宽度自适应*/
width:100%;/*100%是相对于父级，它的父级是body*/
/* 为了简化 ，头部和底部统一设置高度为60*/
height:60px;
/* 参考背景色 */
background-color: lightgray;
}
/*头部和底部内容区设置*/
.content{
width: 1000px;
/* 高度相对于父级header,footer 100% */
min-height:100%;
background-color: gray;
/* 水平居中 */
margin:auto;
/* 文本水平居中 */
text-align: center;
/*垂直居中*/
line-height: 60px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">
网站头部
</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="center">
中间
</div>
<div class="left">
左侧
</div>
<div class="right">
右侧
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
网站底部
</div>
</div>
</body>
</html>
效果：
设置container样式，需在一开始就设置为中间区块的宽度600px
效果：
将三个区块都设置为左浮动
效果：
然后，需要将下面两个区块移动到图示位置：
效果：
现在中间区块是600px,需要给左右两边弄出200px的padding，相当于占位符，然后再将蓝色和绿色区块向左向右移动到左右两侧200px的padding中
切出左右200px的空间
效果，此时看不出区别，这是因为float会导致脱离文档流
给父元素加一个overflow:hidden;
效果：
此时，使用相对定位将蓝色和绿色色块移动到左右两侧黄色区域：
效果:
至此，圣杯布局结束
补充知识点，浮动元素也支持相对定位（比如最后我们对蓝色和绿色色块使用了相对定位）
原始结构：
全部左浮动：
让中间的元素相对定位
按理说浮动脱离文档流后，不支持相对定位，但实际是支持的，这时这三个区块在一个浮动的文档流中，支持相对定位
最终源码：
本文作者为BUG之神，转载请注明。