聖杯布局與雙飛翼布局的前半部分是相同的：
1）middle、left、right三欄全部浮動（float:left）；
2）middle中間欄放在文檔流前優先渲染（因為浮動元素會把塊級元素的位置空出來）；
3）footer元素中要用clear:both;清除浮動；
4）middle中間欄的寬度設為100%；left的margin-left應為-100%；right的margin-left應為-right元素的寬；
此時中間部分（middle）的內容會被左右遮擋，解決這個問題，聖杯布局與雙飛翼布局的方法是不同的：
聖杯布局：
1）將left、middle、right放置在一個div中（class='bd'）；
2）將div的padding-left設為left元素的寬，padding-right設為right元素的寬；
2）此時left、right的位置也會發生改變，需要將其設為相對位置（position:relative），通過設置left或right屬性移動元素；
雙飛翼布局：
1）將middle中的內容放置在一個div（class='mi_ct'）中；
2）將這個div的margin-left設置為left元素的寬，margin-right設置為right元素的寬；
一、聖杯布局
1 <div class="hd">header</div> 2 <div class="bd"> 3 <!--middle放在最前面--> 4 <div class="mi">middle</div> 5 <div class="le">left</div> 6 <div class="ri">right</div> 7 </div> 8 <div class="footer">footer</div>
1 /*header頭部*/ 2 .hd { 3 background-color: #666; 4 /*內容居中*/ 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 height: 50px; 9 } 10 /*footer尾部*/ 11 .footer { 12 background-color: #666; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 height: 30px; 17 /*清除浮動*/ 18 clear: both; 19 } 20 /*放置left、right、middle*/ 21 .bd { 22 padding: 0 100px 0 200px; 23 } 24 /*middle部分*/ 25 .mi { 26 background-color: red; 27 float: left; 28 width: 100%; 29 height: 100px; 30 } 31 /*left部分*/ 32 .le { 33 background-color: green; 34 float: left; 35 margin-left: -100%; 36 width: 200px; 37 position: relative; 38 left: -200px; 39 height: 100px; 40 } 41 /*right部分*/ 42 .ri { 43 background-color: yellow; 44 float: left; 45 margin-left: -100px; 46 width: 100px; 47 position: relative; 48 right: -100px; 49 height: 100px; 50 }
二、雙飛翼布局
1 <div class="hd">header</div> 2 <div class="bd"> 3 <!--middle放在最前面，中間用div放置內容--> 4 <div class="mi"><div class="mi_ct">middle</div></div> 5 <div class="le">left</div> 6 <div class="ri">right</div> 7 </div> 8 <div class="footer">footer</div>
1 .hd { 2 background-color: #666; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 height: 50px; 7 } 8 .footer { 9 background-color: #666; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 height: 30px; 14 clear: both; 15 } 16 .mi { 17 background-color: red; 18 float: left; 19 width: 100%; 20 height: 100px; 21 } 22 /*放置內容部分*/ 23 .mi_ct { 24 margin-left: 200px; 25 margin-right: 100px; 26 } 27 .le { 28 background-color: green; 29 float: left; 30 margin-left: -100%; 31 width: 200px; 32 height: 100px; 33 } 34 .ri { 35 background-color: yellow; 36 float: left; 37 margin-left: -100px; 38 width: 100px; 39 height: 100px; 40 }
三、flex布局實現
1） 需在外部用一個div（class='contan'）放置所有內容，display設為flex，並且可換行flex-wrap:wrap；
2）頭部、尾部寬度為100%，將中間部分（bd）擠到中間；
3）中間（bd）寬度也為100%，display設為flex，使其中內容為三欄布局（left、right寬度固定，中間middle自適應（flex:1））；
1 <div class="contain"> 2 <div class="hd">header</div> 3 <div class="bd"> 4 <div class="le">left</div> 5 <!--需按順序排列，middle不在最前面--> 6 <div class="mi">middle</div> 7 <div class="ri">right</div> 8 </div> 9 <div class="footer">footer</div> 10 </div>
1 .contain { 2 display: flex; 3 flex-wrap: wrap; 4 height: 300px; 5 } 6 .hd { 7 background-color: #666; 8 width: 100%; 9 height: 15%; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 } 14 .footer { 15 background-color: #666; 16 width: 100%; 17 height: 10%; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 } 22 .bd { 23 display: flex; 24 width: 100%; 25 height: 75%; 26 } 27 .mi { 28 background-color: red; 29 flex: 1; 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 } 34 .le { 35 background-color: green; 36 width: 200px; 37 display: flex; 38 justify-content: flex-start; 39 align-items: center; 40 } 41 .ri { 42 background-color: yellow; 43 width: 100px; 44 display: flex; 45 justify-content: flex-end; 46 align-items: center; 47 }