聖杯布局和雙飛翼布局是前端工程師需要掌握的布局方式，兩者功能相同，都是為了實現兩側寬度固定，中間寬度自適應的布局方式，此外，使用新增的flex布局，可以使布局更加簡單。
雙飛翼布局和聖杯布局雖然實現方式有所差異，但是基本上都遵循了以下幾點：
-
兩側寬度固定，中間寬度自適應
-
中間結構在DOM上優先，以便於優先渲染
下面依次介紹聖杯布局、雙飛翼布局、彈性布局實現三欄布局
聖杯布局
一、搭建主體結構
我們先搭建主體框架，將主體結構寫出來
<div class="header"></div> <div class="container"></div> <div class="footer"></div>
我們將為左右預留出一定的空間，作為左右固定兩欄的位置
.container{
padding-left:200px;
padding-right:150px;
}
這時，我們的主體結構變成這樣了
二、添加中、左、右三列
接下來我們將左、中、右三列添加到主體框架中
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
注：注意container內三欄的先后順序，center寫在最前面
隨后給三列設置寬度和浮動，然后給footer添加清除浮動
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
注：此時為center添加的100%寬度，是父元素的內容寬度，因為父元素有左右padding，所以center的寬度只是中間欄的寬度
且由於center占據了內容寬度的100%，所以導致左右列被換行。得到以下效果：
三、移動left塊
由於center，寬度的影響，導致left和right被擠到下一行，這里我們可以將它們看作在同一行，為left添加負外邊距。
#left {
width: 200px;
margin-left: -100%;
}
注：這里的-100%是指父元素內容寬度的100%,所以，left會移動到最左側，如下圖示
隨后我們為每個塊添加相對定位，並使left相對自己偏移200px，正好可以覆蓋center的padding值。
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
4、移動right塊
接下來我們將right塊移到右邊，我們依舊可以將其看作和center同行。這里依舊采用負外邊距。
#right {
width: 150px;
margin-right: -150px;
}
現在，聖杯布局就已經完全成功了。
雖然我們已經將聖杯布局成功的寫了出來，但是要考慮到，當頁面縮小時如何保證頁面的正確顯示？這就涉及到了最小寬度，但並不是簡單的left+right = 350px;仔細想一想，此前我們對left設置了相對定位。所以left的200px存在於center上，所以最小寬度為200+150+200 = 550px;因此，再添上下面這段代碼：
body {
min-width: 550px;
}
整體布局css為：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
雙飛翼布局
一、搭建DOM結構
搭建主體結構
<body> <div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> <body>
添加css代碼
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}#container {
width: 100%;
}
.column {
float: left;
}
雙飛翼布局的DOM結構與聖杯布局的區別是用container僅包裹住center，另外將.column類從center移至container上。將得到如下所示的效果
以上代碼將container,left,right設置為float: left，而在container內部，center由於沒有設置浮動，所以其寬度默認為container的100%寬度，通過對其設置margin-left和margin-right為左右兩列預留出了空間。
二、移動left塊
將left放置到預留位置：
#left {
width: 200px;
margin-left: -100%;
}
如圖：
三、移動right塊
#right {
width: 150px;
margin-left: -150px;
}
如圖：
最后計算最小頁面寬度，我們最好把寬度留大一些。
body {
min-width: 500px;
}
整體代碼布局css為：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
Flex彈性三欄布局
一、搭建DOM結構
搭建主體結構
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
添加flex彈性盒子
.container {
display: inline-flex;
flex-direction: row;
width: 100%;
}
.left {
width: 200px;
}
.center {
flex: 1;
width: 100%;
}
.right {
height: 300px;
width: 150px;
background: rgb(252, 78, 39);
}
記得一定要給center塊添加flex:1，這是必要的，否則將無法實現兩邊固定，中間彈性的布局
如圖
