實現效果
通過下面的方法實現三列布局，最終實現的結果都如下所示：
float+BFC實現
基本思路：其中兩列使用float實現固定，另外一列這是通過觸發BFC，利用BFC盒子不會與浮動盒子解除從而實現三列布局，其中兩列是固定寬度，一列是自適應寬度。
注意點：因為觸發BFC的盒子是自適應的，所以它寬度總是占滿余下的所有空間，因此如果是兩邊固定寬度且使用float固定，中間自適應，那么在設置的時候應該先設置浮動的兩個盒子；如果你先設置一個浮動盒子，然后立馬放BFC盒子，由於BFC盒子的寬度會占滿余下的所有空間，會導致第二個浮動的盒子被強制換行。正確代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 } 16 17 .main { 18 overflow: hidden; 19 background-color: skyblue; 20 } 21 22 .left { 23 float: left; 24 width: 50px; 25 background-color: red; 26 } 27 28 .right { 29 float: right; 30 width: 50px; 31 background-color: pink; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="box outside"> 38 <div class="box left"></div> 39 <div class="box right"></div> 40 <div class="box main"></div> 41 </div> 42 43 </body> 44 45 </html>
設置左右外邊距實現
基本思路：設置兩個固定寬度的盒子左右浮動，分別排列到兩側，由於浮動的盒子不再占據文檔里，此時中間的盒子還在文檔流，那么中間盒子就會被浮動盒子遮蓋，所以我們給中間的盒子設置左右外邊距，通過左右外邊距實現了中間盒子不被浮動盒子遮蓋實現三列布局。這個可以實現兩欄固定寬度，一欄寬度自適應。
注意點：要熟悉浮動的基本概念，同時也要熟悉外邊距的實現。代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 } 16 17 .main { 18 margin-left: 50px; 19 margin-right: 50px; 20 background-color: skyblue; 21 } 22 23 .left { 24 float: left; 25 width: 50px; 26 background-color: red; 27 } 28 29 .right { 30 float: right; 31 width: 50px; 32 background-color: pink; 33 } 34 </style> 35 </head> 36 37 <body> 38 <div class="box outside"> 39 <div class="box left"></div> 40 <div class="box right"></div> 41 <div class="box main"></div> 42 </div> 43 44 </body> 45 46 </html>
position實現
基本思路：通過子絕父相實現三列布局，注意：這種方式不能實現兩列固定寬度，一欄自適應寬度。必須要計算好三列各自的寬度！
注意點：要熟悉定位中的子絕父相規則。實現如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 position: relative; 16 } 17 18 .main { 19 width: 100px; 20 position: absolute; 21 top: 0; 22 left: 50px; 23 background-color: skyblue; 24 } 25 26 .left { 27 width: 50px; 28 position: absolute; 29 top: 0; 30 left: 0; 31 background-color: red; 32 } 33 34 .right { 35 width: 50px; 36 position: absolute; 37 top: 0; 38 right: 0; 39 background-color: pink; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="box outside"> 46 <div class="box left"></div> 47 <div class="box right"></div> 48 <div class="box main"></div> 49 </div> 50 51 </body> 52 53 </html>
display:table 實現
基本思路：都知道，在上古時期網頁布局主要是通過表格的方式實現，但是現在網頁布局都是通過div+css的方式來實現的。不過有些時候我們仍然需要使用表格來布局，但是！如果我們直接使用標簽table來布局，就做不到語義化的要求，因此就有了display:table 的出現。基本了解如下知識點：
| display屬性值 | 代表含義 |
| table | （類似 <table>）此元素會作為塊級表格來顯示，表格前后帶有換行符。 table時padding會失效 |
| table-row | （類似 <tr>）此元素會作為一個表格行顯示。 table-row時margin、padding同時失效 |
| table-cell | （類似 <td> 和 <th>）此元素會作為一個表格單元格顯示。 table-cell時margin會失效 |
table系列的屬性不止以上所列，要知道更多的可以去百度查詢。但是知道了如下幾個之后我們就可以實現三列布局的實現。
注意點：table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以，很多時候，我們需要等高布局的時候，就可以借助display:table-cell屬性。說到table-cell的布局，不得不說一下“匿名表格元素創建規則”：
CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丟失”的元素會被模擬出來，
從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table- cell的三層嵌套關系。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 display: table; 16 } 17 18 .row { 19 display: table-row; 20 } 21 22 .main { 23 width: 100px; 24 display: table-cell; 25 background-color: skyblue; 26 } 27 28 .left { 29 width: 50px; 30 display: table-cell; 31 background-color: red; 32 } 33 34 .right { 35 width: 50px; 36 display: table-cell; 37 background-color: pink; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="box outside"> 44 <div class="row"> 45 <div class="box left"></div> 46 <div class="box main"></div> 47 <div class="box right"></div> 48 </div> 49 </div> 50 51 </body> 52 53 </html>
Flex 伸縮布局
基本思路：Flex布局有點類似於bootstrap的柵格布局。
注意點： Flex 的兼容性有問題。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 height: 200px; 11 } 12 13 .outside { 14 width: 200px; 15 display: flex; 16 } 17 18 .main { 19 width: 100px; 20 background-color: skyblue; 21 } 22 23 .left { 24 width: 50px; 25 background-color: red; 26 } 27 28 .right { 29 width: 50px; 30 background-color: pink; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="box outside"> 37 <div class="box left"></div> 38 <div class="box main"></div> 39 <div class="box right"></div> 40 </div> 41 42 </body> 43 44 </html>