經典的三欄佈局：聖盃佈局，雙飛翼佈局，flex佈局
需求：
兩邊欄固定寬度，中間寬度自適應，一般左邊欄為導航，右邊欄為廣告，中間欄為主要內容的展示，div塊上中間欄放在第一位，重要的東西放在文件流前面可以優先渲染。
聖盃佈局和雙飛翼佈局的共同特點都是利用float+margin的負值來實現並列的結構。首先中間欄width 100%後，左右欄被擠在第二行，左欄margin-left設定為-100%後（實際即為中間欄的寬度），這樣左欄就跟中間欄並列，且左欄和中間欄的左邊緣對其，同理右欄margin-left(因為float是向左的)設定為右欄自己寬度的負值，這樣就升上去，且右邊緣和中間欄的右邊欄重合。
現在的問題就是左右欄佔用了main的空間。聖盃佈局和雙飛翼的佈局的處理差異也就在這裡：
1.聖盃佈局
聖盃佈局的處理方式為父容器container設定padding-left和padding-right為左右欄的寬度，此時左右欄會表現往裡面縮一些，因為padding只是調節內部元素的位置並不會顯示width的content（盒子模型），對外部元素沒影響。此時就需要用相對定位調節左右欄left和right為父容器pading左右值的負值，這樣就移開了左右欄對中間欄的佔據，且中間欄的內容全部顯示在width的content中。
程式碼：
<!-- 聖盃佈局 -->
<!DOCTYPE html>
<html>
<head> 2. 雙飛翼佈局
雙飛翼並列的方式與聖盃佈局相同，但是擯棄了相對定位的方式。而是給中間欄加了一個父容器，父容器設定float，子容器設定margin-left和margin-right抵消左右欄佈局的寬度，避免content顯示部分被左右欄覆蓋到自己寬度。（注意不是float左右因為margin移動了，而是是中間欄的content的內容width一部分寬度分給了margin，自己縮小了，float是脫離的文件流的，無視block，但是受影響到文字，參考文字環繞）。
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
/* 多10px間距 */
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</body>
</html>先進而簡單的flex佈局
1.order指定順序，預設為0，越小越靠前
2.flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
3.flex-basic:屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.container {
display: flex;
min-height: 300px;
}
.left {
order: -1;
flex-basis: 300px;
background-color: green;
}
.right {
flex-basis: 150px;
background-color: red;
}
.main {
flex-grow: 1;
background-color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>