這篇部落客要是介紹一下三欄布局的聖杯布局；
聖杯布局與雙飛翼布局實際上是差不多的，他們實作的都是三欄布局，兩邊的盒子寬度固定，中間的盒子自适應；也就是我們常說的固比固布局；兩個布局方式實作的效果是一樣的，差別在于實作的思想；
在了解了什麼是三欄布局之後，我們主要來看一下聖杯模式的實作：
首先，先确定HTML的結構（先注意，寫結構的時候，先寫中間先渲染的盒子）
<header><h4>Header内容區</h4></header>
<div class="container">
<div class="middle"><h4>中間彈性區</h4></div>
<div class="left"><h4>左邊欄</h4></div>
<div class="right"><h4>右邊欄</h4></div>
</div>
<footer><h4>Footer内容區</h4></footer>
然後利用css進行一定的修飾：
*{
margin:0;
padding:0;
}
header{
width: 100%;
height: 40px;
background-color:#666;
}
.middle{
width: 100%;
height: 200px;
background-color: #0b0;
float: left;
}
.left{
width: 200px;
height: 200px;
background-color: #e00;
float:left;
}
.right{
width: 200px;
height: 200px;
background-color: #00e;
float:left;
}
.container::after{
content: '';
display: block;
clear: both;
}
footer{
width: 100%;
height: 40px;
background-color:#666;
}
上面的css解釋幾點：
1、因為中間的盒子要自适應，是以設定的寬度為100%；
2、使元素浮動float：left；使元素向左浮動；（div的display原來是block，現在是inline-block）；是為了讓元素擠在同一行；但是由于設定的是width：100%；是以後面的兩個元素被擠到下一行；
3、使用僞元素清除浮動，因為浮動元素會産生浮動流，對不同的元素有不同的影響；同樣可見文章float（浮動）模型來深入了解一下；
現在設定了此時的HTML和基本的css後，頁面展現的是：
此時還沒有實作三欄布局，因為左右邊欄被擠到下一行，那麼現在我們要将其拉上去；
我們需要：在.left上添加屬性：margin-left：（負的上一個元素的寬度，這裡的就是-100%）；
在.right上添加屬性：margin-left：（負的自身元素的寬度，這裡就是-200px）；
此時左右邊欄被拉上去，如圖：
但是會發現一個問題，原來中間彈性區這幾個字去哪兒了？
其實就是被左邊欄遮住了，意思就是說，這樣直接把左右邊欄拉上去，會覆寫中間寬度為100%的中間元素；
想辦法解決：
在父容器上添加内邊距padding，這裡設定為上下為0，左右為左右便懶得寬度，即padding：0 200px；
（此時中間彈性區就被縮短；然後再對左右邊欄進行相對定位，就會把原來覆寫的區域顯現出來了）
在.left上添加屬性定位為position：relative；然後再将其向左移動left：（父元素padding所設定的值）-200px；
在.right上添加屬性同樣定位為position：relative；然後将其向右移動right：（同上）-200px；
效果圖：
現在就解決被遮擋的問題了；變成了三欄布局；左邊欄、中間彈性區、右邊欄；
這就是所謂的聖杯布局；