本文轉載（https://www.jianshu.com/p/3046eb050664）
六種布局方式：聖杯布局、雙飛翼布局、Flex布局、絕對定位布局、表格布局、網格布局
一.聖杯布局
聖杯布局是指布局從上到下分為header、container、footer，然后container部分定為三欄布局。
基礎HTML：
1 <body> 2 <div class="container"> 3 <!-- 優先渲染 --> 4 <div class="center"> 5 center 6 </div> 7 <div class="left"> 8 left 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
基礎CSS：
1 .container { 2 overflow: hidden; 3 } 4 .container > div { 5 position: relative; 6 float: left; 7 height: 100px; 8 } 9 .center { 10 width: 100%; 11 background-color: red; 12 } 13 .left { 14 width: 200px; 15 background-color: green; 16 } 17 .right { 18 width: 200px; 19 background-color: blue; 20 }
對於container，給他設置一個overflow:hidden使其成為一個BFC（塊級格式化上下文）。BFC的作用:
1.消除Margin Collapse
2.容納浮動元素
3.阻止文本換行
使三欄浮動，並相對定位，給左右兩個容器設置200px的寬度，中間的容器設置100%的寬度。此時left和right被相對於父元素container寬度的100%的center擠到下面。
步驟：
1.發left放在center上方：由於浮動的原因，給left設置margin-left:100%即可使左側欄浮動到center上方，並位於center左側之上。
2.同樣設置right margin-left:-200px,這里的長度等於right的長度。
3.這時center的兩側被left和right覆蓋了，因此給container設置padding：0 200px
4.由於left和right也同時往中間縮，因為給left和right分別設置left:-200px;right:-200px,往兩側分別偏移自身的寬度去覆蓋掉contaniner使用padding后的空白位置。
這時，聖杯布局就完成了，但是在拖到很小的時候布局會亂，一下是最終樣式：
.container { overflow: hidden; padding: 0 200px; } .container > div { position: relative; float: left; height: 100px; } .center { width: 100%; background-color: red; } .left { width: 200px; background-color: green; margin-left: -100%; left: -200px; } .right { width: 200px; background-color: blue; margin-left: -200px; right: -200px; }
二.雙飛翼布局
這種布局方式同樣分為header、container、footer。聖杯布局的缺陷在於center是在container的padding中的，因此寬度小的時候會出現混亂。
雙飛翼布局給center部分報過了一個main，通過設置margin主動的把頁面撐開。
基礎HTML：
1 <div class="container"> 2 <!-- 優先渲染 --> 3 <div class="center"> 4 <div class="main"> 5 center 6 </div> 7 </div> 8 <div class="left"> 9 left 10 </div> 11 <div class="right"> 12 right 13 </div> 14 </div>
步驟1和步驟2同聖杯布局
區別：
第三步：給main設置margin：0 200px，同時設置overflow：hidden，使其成為一個BFC。
這時窗口寬度過小時就不會出現混亂的情況了，關鍵點在於內容部分是包裹在main中。
最終樣式如下：
1 .container { 2 overflow: hidden; 3 } 4 .container > div { 5 position: relative; 6 float: left; 7 height: 100px; 8 } 9 .center { 10 width: 100%; 11 background-color: red; 12 } 13 .left { 14 width: 200px; 15 background-color: green; 16 margin-left: -100%; 17 } 18 .right { 19 width: 200px; 20 background-color: blue; 21 margin-left: -200px; 22 } 23 .main { 24 height: 100%; 25 margin: 0 200px; 26 background-color: rosybrown; 27 overflow: hidden; 28 }
3.Flex布局
Flex布局是由CSS3提供的一種方便的布局方式。
基礎HTML：同聖杯布局
步驟：
1.給container設置為一個flex容器：display：flex
2.center的寬度設置為width：100%，left和right設置為200px
3.為了不讓left和right被center設置的100%壓縮，給left和right設置flex-shrink：0（定義項目的縮小比例，默認為1，如果空間不足則項目縮小，如果有一項為0，其他為1，當空間不足時，前者不縮小）。
4.使用order屬性給三個部分的DOM結構進行排序：left：order：1，center:order:2,right:order:3
flex布局是一種極其靈活的布局方式，最終樣式如下：（flex存在瀏覽器兼容性）
1 .container { 2 display: flex; 3 } 4 .center { 5 background-color: red; 6 width: 100%; 7 order: 2; 8 } 9 .left { 10 background-color: green; 11 width: 200px; 12 flex-shrink: 0; 13 order: 1; 14 } 15 .right { 16 background-color: blue; 17 width: 200px; 18 flex-shrink: 0; 19 order: 3; 20 }
4.絕對定位布局
基礎HTML和聖杯布局一樣。
步驟：
1.給container設置position：relative和overflow：hidden，因為絕對定位的元素的參照物為第一個position不為static的祖先元素。
2.left向左浮動，right向右浮動。
3.center使用絕對定位，通過設置left和right把兩邊撐開。
4.center設置top：0，bottom:0使其高度撐開。
.center { position: absolute; left: 200px; right: 200px; top: 0; bottom: 0; }
這種方式的缺點是依賴於left和right的高度，如果兩邊欄的高度不夠，中間的內容區域的高度也會被壓縮。
5.table-cell 布局
表格布局的好處是能使三欄的高度統一。
基礎HTML：
1 <body> 2 <div class="container"> 3 <div class="left"> 4 left 5 </div> 6 <!-- 這時的center要放在中間 --> 7 <div class="center"> 8 center 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
步驟：
1.給三欄都設置表格單元：display：table-cell
2.left和right width:200px , center width:100%
3.這時left和right都被到兩邊去了，因此要分別設置min-widht：200px 確保不會被擠壓。
最終樣式：
1 .container { 2 overflow: hidden; 3 position: relative; 4 } 5 .container > div { 6 display: table-cell; 7 height: 100%; 8 } 9 .center { 10 margin: 0 200px; 11 width: 100%; 12 background: red; 13 } 14 .left { 15 width: 200px; 16 min-width: 200px; 17 background-color: green; 18 } 19 .right { 20 width: 200px; 21 min-width: 200px; 22 background-color: blue; 23 }
這種布局方式能使得三欄的高度是統一的，但不能使center放在最前面得到最先渲染。
6.網格布局
網格布局可能是最強大的布局方式了，使用起來極其方便，但目前而言，兼容性不好。網格布局，可以將頁面分割成過個區域，或者用來定義內部元素的大小，位置，圖層關系。
基礎HTML：
1 <body> 2 <div class="container"> 3 <div class="left"> 4 left 5 </div> 6 <!-- 這時的center要放在中間 --> 7 <div class="center"> 8 center 9 </div> 10 <div class="right"> 11 right 12 </div> 13 </div> 14 </body>
步驟：
1.給container設置為display：grid
2.設置三欄的高度：grid-template-rows：100px
3.設置三欄的寬度，中間自適應，兩邊固定：grid-template-columns：200px auto 200px；
.container { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; }
僅這四條樣式命令就能完成三欄布局，可見網格布局之強大。
總結：
1.聖杯布局、雙飛翼布局、flex布局的center高度不受兩邊影響，取決於其自身內容所占高度。
2.絕對布局center高度取決於兩側的高度(因為是通過設置top：0，bottom:0 把高度撐開的)
3.table-cell布局能讓三欄高度統一，但是不能優先渲染center
4.網格布局也不能優先渲染center，但布局簡單，存在兼容性問題。
5.flex布局也存在兼容性問題。
6.聖杯布局在頁面縮小時會出現錯亂問題。