聖盃佈局、雙飛翼佈局的理解及對比
一、聖盃佈局
1.聖盃佈局的DOM結構如下：
聖盃特點簡單記為：有頭、有尾、包三列，聖盃佈局中間是有container大容器包裹著左中右區域的。
<!--特點：有頭、有尾、包三列(有個container容器包裹：左、中、右三個區域)--> <header>我是聖盃佈局頭部</header> <!--包裹middle、left、right的container容器--> <div class="container clearFloat"> <div class="middle"> 我是中間區域<br> </div> <div class="left">我是左側</div> <div class="right">我是右側</div> </div> <footer>我是聖盃布底部部</footer>
2.聖盃佈局思路：
1. container包裹的：header、footer加：width:100%，height:30px。
2. container包裹的：中間區域（middle）寬度設定100%；middle，left均給200px；middle，left，right均左浮動，此時middle佔了100%，寬度不夠left，right被擠到下一行。
3. left設定margin-left:-100%，right設定margin-left:-200px；此時left區域上去了，並靠左，right上去了，靠右；但是left遮擋住了middle的左側部分。
4. 設定container的padding:200px，讓左右讓出200px區域給left和right，但left、right也跟著過去了。
5. 給left和right加relative相對定位，然後left區域：left:-200px；然後right區域：right:200px；為了效果給middle、left、right都價格高度，中間正常顯示，聖盃佈局完成。
備註：為了觀看清晰，body加了一個淺黃色背景，header和footer加了文字居中等樣式。
處理等高問題：當左側內容很多時，header、right區域會不與left等高，如下圖：
利用magrin為負處理這個問題，給left、right、middle都加上padding-bottom:10000px，同時設定margin-bottom:10000px，將父容器container邊緣推上去，同時父容器container設定overflow:hidden，達到如下效果：
3.聖盃佈局最終CSS樣式：
<style>
*{
margin: 0;
padding: 0;
}
/*為便於觀察body加了淡黃色背景*/
body{
background-color: #FFFFE0;
}
/*清除浮動*/
.clearFloat:after{
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearFloat{
zoom: 1;
}
header{
width: 100%;
height: 30px;
background-color: gray;
text-align: center;
}
footer{
width: 100%;
height: 30px;
background-color: gray;
text-align: center;
}
.container{
padding: 0 200px;/*給左右讓空間*/
overflow: hidden;/*配合超大padding和超大負margin實現等高佈局*/
}
.middle{
float: left;
width: 100%;
background-color: orange;
text-align: center;
padding-bottom: 10000px;/*為了實現等高*/
margin-bottom: -10000px;/*為了實現等高*/
}
.left{
float: left;
width: 200px;
background-color: greenyellow;
text-align: center;
margin-left: -100%;/*讓left上去，靠左*/
position: relative;/*給left推到左邊*/
left: -200px;/*給left推到左邊*/
padding-bottom: 10000px;/*為了實現等高*/
margin-bottom: -10000px;/*為了實現等高*/
}
.right{
float: left;
width: 200px;
background-color: lightpink;
text-align: center;
margin-left: -200px;
left: 200px;/*給right推到右邊*/
position: relative;/*給right推到右邊*/
padding-bottom: 10000px;/*實現等高*/
margin-bottom: -10000px;/*實現等高*/
}
</style>二、雙飛翼佈局
1.雙飛翼佈局DOM結構
<header>我是雙飛翼頭部區域</header>
<div id="middle">
<div id="inside">我是中間區域</div>
</div>
<div id="left">我是左側</div>
<div id="right">我是右側</div>
<footer>我是雙飛翼底部區域</footer>2.雙飛翼佈局思路（前三步與聖盃相同）
1. header、footer寬度100%，同聖盃佈局第一步；
2.left、right、middle三個區域全左浮動，同聖盃佈局第二步；
3.left、right設定margin-left，讓左靠左，右靠右，此時left、right遮擋了middle區域同聖盃第三步；
4.將被middle包裹的inside設定margin:0 200px; 給左右留出空間；
5.給左側設定：margin-left: -100%; 給右側設定：margin-left: -200px; 讓左靠左，右靠右，完成雙飛翼佈局。
3.雙飛翼佈局最終CSS樣式：
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFFFE0;/*便於觀看加的樣式*/
}
header{
height:30px;
background: gray;
text-align: center;
}
footer{
clear: both;
height:30px;
background: gray;
text-align: center;
}
#middle{
float:left;
width:100%;
text-align: center;
}
#left{
float:left;
width:200px;
text-align: center;
margin-left: -100%;
background:yellowgreen;
}
#right{
float:left;
width:200px;
text-align: center;
margin-left: -200px;
background:lightpink;
}
/*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%*/
#inside{
background-color: orange;
text-align: center;
margin:0 200px;
}
</style>三、聖盃和雙飛翼佈局的區別
其實簡單來說二者的區別就在：解決中間區域被遮擋問題的方式上。
1.聖盃解決被遮蓋的方式：
在最開始用容器包裹了：左、中、右，隨後通過設定包裹容器container的padding，讓中間區域左右留白，也就是說聖盃佈局的左、中、右是完全獨立的，他們之間是有縫隙的（如果縫隙可見的話），例如我們接下來：
1. 給container加一個藍色背景色，並且設定高一些的高度。
2. 去左、中、右的等高佈局，給middle再加一行文字。
則從在空間立體檢視上，左、中、右位置如下圖：
可以看出，左、中、右是獨立的三個區域，都處於一個層級，都由container這個容器（藍色）承接，左右兩側是靠container的padding留出來的。
2.雙飛翼解決被遮蓋的方式：
雙飛翼採用只處理中間解決遮蓋問題，先給中間的包裹器middle加margin，讓出左右空間，然後給left、right設定margin為負，把自己推上去，空間側檢視如下：
可以看出，左、中、右是獨立的三個區域，中間區域屬於最上面的層級（inner那個div），左右兩側和middle容器一個層級
