css 雙飛翼佈局（flex 、float）和 聖盃佈局
雙飛翼佈局
雙飛翼佈局，是一種頁面佈局的形象的表達。具體表現形式為 兩邊頂寬，中間自適應寬度的三欄佈局，中間欄要放在HTML文件流的最前，優先渲染
實現方式
float 浮動流
頁面基本佈局很簡單，總共有三欄，中間欄位於文件流的最前面，優先渲染 ``` <body> <section class="container"> <div class="main"> // 中間欄，位於文件流的最前面 <div class="main-inner"> // 中間欄內容 </div> </div> <div class="sub"></div> // sub 左邊欄 <div class="extra"></div> // extra 右邊欄 </section> </body> ```
為方便顯示，清除
margin和padding, 指定高度給container,指定背景顏色給三欄/* 清除margin和padding */ * { margin: 0; padding: 0; } /* 方便顯示效果，指定高度，這裡應該內容自動撐高 */ .container { height: 600px; } .main { background: red; } .sub { background: blue; } .extra { background: yellow; }三欄全部左浮動，指定高度
/* 三欄都左浮動，指定高度 */ .main, .sub, .extra { float: left; height: 100%; }中間欄寬度
100%，佔滿所有寬度， 排在第一行.main { width: 100%; }sub左邊欄 指定寬度150px, 這個時候，因為main中間欄已經佔滿所有寬度，所以sub左邊欄被擠出螢幕， 又因為之前統一左浮動，所以，
所以sub從main下面，第二行排列， 為了sub左邊欄能夠排到第一行的最左邊，sub左邊欄 指定margin-left: -100%;-100%即為整個螢幕的寬度.sub { width: 150px; margin-left: -100%; }同理，
extra右邊欄 指定寬度200px,main中間欄還是已經佔滿所有寬度，所以extra右邊欄被擠出螢幕， 又因為之前統一左浮動，所以，
所以extra從main下面，第二行排列， 為了`extra右邊欄能夠排到第一行的最右邊，extra右邊欄 指定margin-left: -200px;.extra { width: 200px; margin-left: -200px; }為了中間
main內容不被遮擋，直接在中間main內部建立子main-inner用於放置內容，在該子main-inner裡用margin-left和margin-right為左右兩欄留出位置。.main-inner { margin-left:150px; margin-right: 200px; height: 100%; }flex流頁面佈局基本不變
<body> <section class="container"> <div class="main"> // 中間欄，位於文件流的最前面 </div> <div class="sub"></div> // sub 左邊欄 <div class="extra"></div> // extra 右邊欄 </section> </body>為方便顯示，清除
margin和padding, 指定高度給container,指定背景顏色給三欄/* 清除margin和padding */ * { margin: 0; padding: 0; } /* 方便顯示效果，指定高度，這裡應該內容自動撐高 */ .container { height: 600px; } .main { background: red; } .sub { background: blue; } .extra { background: yellow; }父元素
display: flex;讓子元素排在一行.container { display: flex; }中間欄
flex-grow: 1;自動佔滿剩餘所有寬度.main { flex-grow: 1; }sub左邊欄 指定flex-grow: 0;不佔滿剩餘寬度,flex-shrink: 0;如果空間不足，該欄不縮小,flex-basis: 150px;指定固定寬度為150px;
order: -1,flex佈局中，order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。此處為-1， 排在最左邊.sub { flex: 0 0 150px; order: -1; }extra右邊欄order為1， 排在最右邊.extra { flex: 0 0 200px; order: 1; }
聖盃佈局
聖盃佈局和雙飛翼佈局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文件流前面以優先渲染。聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。不同在於解決 “中間欄div內容不被遮擋” 問題的思路不一樣：
聖盃佈局，為了中間div內容不被遮擋，將中間div設定了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div
```
<body>
<section class="container">
<div class="main"> // 中間欄，位於文件流的最前面
</div>
</div>
<div class="sub"></div> // sub 左邊欄
<div class="extra"></div> // extra 右邊欄
</section>
</body>
```
為方便顯示，清除
margin和padding, 指定高度給container,指定背景顏色給三欄/* 清除margin和padding */ * { margin: 0; padding: 0; } /* 方便顯示效果，指定高度，這裡應該內容自動撐高 */ .container { height: 600px; } .main { background: red; } .sub { background: blue; } .extra { background: yellow; }三欄全部左浮動，指定高度
/* 三欄都左浮動，指定高度 */ .main, .sub, .extra { float: left; height: 100%; }中間欄寬度
100%，佔滿所有寬度， 排在第一行.main { width: 100%; }sub左邊欄 指定寬度150px, 這個時候，因為main中間欄已經佔滿所有寬度，所以sub左邊欄被擠出螢幕， 又因為之前統一左浮動，所以，
所以sub從main下面，第二行排列， 為了sub左邊欄能夠排到第一行的最左邊，sub左邊欄 指定margin-left: -100%;-100%即為整個螢幕的寬度.sub { width: 150px; margin-left: -100%; }同理，
extra右邊欄 指定寬度200px,main中間欄還是已經佔滿所有寬度，所以extra右邊欄被擠出螢幕， 又因為之前統一左浮動，所以，
所以extra從main下面，第二行排列， 為了`extra右邊欄能夠排到第一行的最右邊，extra右邊欄 指定margin-left: -200px;.extra { width: 200px; margin-left: -200px; }為了中間
main內容不被遮擋，需要給父容器container新增padding。.container{ padding: 0 200px 0 150px; height: 100%; }這個時候因為兩邊
padding的原因，sub欄 和extra欄的位置已經被擠到中間，為了回到預定的位置，使用position定位.sub{ position: relative; left: -150px; } .extra { position: relative; right: 200px; }
總結
總得來說，這三種方法，都是為了實現同一種佈局，除了flex佈局，其餘的方式，所有的瀏覽器都支援，不會有相容問題