1.一列布局——常用於網站首頁。

html：

1 <div class="top"></div>
2 <div class="main"></div>
3 <div class=‘foot‘></div>

css：

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a
 
;
 8         }
 9         .main,.foot{
10             width: 800px;
11             margin:0 auto;
12         }
13         .main{    
14             height: 500px;    
15             background-color: #f1b8e4;
16         }
17         .foot{
18             height: 80px;
19             background-color: #f1f1b8
 
;
20         }

效果：

2.兩列(固定寬度)，自適應布局

html：

1 <div class="main">
2     <div class="left"></div>
3     <div class="right"></div>
4 </div>

css：

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin
 
: 0 auto;
 8        }
 9        .left,.right{
10            height: 600px;
11        }
12        .left{
13            width: 20%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .right{
18            width: 80%;
19            float: right;
20            background-color: #f1b8e4;
21        }

效果圖：

3.三列(固定寬度)，自適應布局

HTML：

1 <div class="main">
2     <div class="left"></div>
3     <div class="middle"></div>
4     <div class="right"></div>
5 </div>

css：

 1 body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .main{
 6            width: 800px;
 7            margin: 0 auto;
 8        }
 9        .left,.right,.middle{
10            height: 600px;
11        }
12        .left{
13            width: 33.3%;
14            float: left;
15            background-color:#f19b6a;
16        }
17        .middle{
18            width: 33.3%;
19            float: left;
20            background-color:#f1f1b8;
21        }
22        .right{
23            width: 33.3%;
24            float: right;
25            background-color: #f1b8e4;
26        }

效果圖：

4.三列布局，中間自適應，兩邊固定寬度：position:absolute;

HTML：

1 <div class="left"></div>
2     <div class="middle">
3     區塊鏈是分布式數據存儲、點對點傳輸、共識機制、加密算法等計算機技術的 新型應用模式。所謂共識機制是區塊鏈系統中實現不同節點之間建立信任、獲取權益的數學算法[1]  。2016年5月，貨幣區塊鏈研究中心出版了國內第一本深入淺出介紹區塊鏈的書籍《區塊鏈：定義未來金融與經濟新格局》。其中介紹了區塊鏈技術對未來金融與經濟帶來的影響。區塊鏈（Blockchain）是比特幣的一個重要概念，火幣聯合清華大學五道口金融學院互聯網金融實驗室、新浪科技發布的《2014—2016全球比特幣發展研究報告》提到區塊鏈是比特幣的底層技術和基礎架構[2]  。本質上是一個去中心化的數據庫，同時作為比特幣的底層技術。區塊鏈是一串使用密碼學方法相關聯產生的數據塊，每一個數據塊中包含了一次比特幣網絡交易的信息，用於驗證其信息的有效性（防偽）和生成下一個區塊。
4     </div>
5 <div class="right"></div>

css:

 1  body{
 2            margin:0;
 3            padding: 0;
 4        }
 5        .left,.right,.middle{
 6            height: 600px;
 7        }
 8        .left{
 9            width: 200px;
10          position:absolute;
11          left: 0;
12          top:0;
13            background-color:#f19b6a;
14        }
15        .middle{
16            margin: 0 310px 0 210px;
17            background-color:#f1f1b8;
18        }
19        .right{
20            width: 300px;
21            position: absolute;
22            right: 0;
23            top:0;
24            background-color: #f1b8e4;
25        }

效果圖：

5.混合布局

html：

 1 <div class="top">
 2     <div class="header"></div>
 3 </div>
 4 <div class="main">
 5     <div class="left"></div>
 6     <div class="right">
 7         <div class="sub_left"></div>
 8         <div class="sub_right"></div>
 9     </div>
10 </div>
11 <div class=‘foot‘></div>

css：

 1 body{
 2             margin:0;
 3             padding: 0;
 4         }
 5         .top{
 6             height: 80px;
 7             background-color: #f19b6a;
 8         }
 9         .top .header{
10             width: 800px;
11             height: 80px;
12             margin: 0 auto;
13             background-color: #e27386;
14         }
15         .main,.foot{
16             width: 800px;
17             margin:0 auto;
18         }
19         .main{    
20             height: 600px;    
21             background-color: #f1b8e4;
22         }
23         .foot{
24             height: 80px;
25             background-color: #f1f1b8;
26         } 
27         .main .left{
28             width: 200px;
29             height: 600px;
30             float: left;
31             background-color: #dcff93;
32 
33          }
34          .main .right{
35              width: 590px;/*600px沒有粉紅色縫隙*/
36              height: 600px;
37              float:right;
38              background-color: #b8f1cc;
39          }
40          .sub_left{
41              width: 200px;
42              height: 600px;
43              float: left;
44              background-color: #f2debd;
45          }
46          .sub_right{
47              width: 380px;/*390px沒有中間綠色縫隙*/
48              height: 600px;
49              float: right;
50              background-color: #c86f67;
51          }

效果圖：

CSS常見布局