聖杯布局也就是三列布局（反正我覺得不像聖杯）,就像這樣：

中間是主要內容，兩邊是其他內容如廣告什麽的，中間的內容區是自適應大小的，而兩邊的是固定大小，可能這樣的布局很容易讓人想到用flex布局實現，一開始我也是這麽想的，但聖杯布局有一個關鍵的地方就是中的主要內容區要優先加載，而文檔加載是按結構順序加載的，所以center這個區塊就要放在left和right前面，結構如下：

1     <div class="box">
2         <div class="center">center</div>
3         <div class="left">left</div>
4
 
         <div class="right">right</div>
5     </div>

首先讓box中所有的div浮動起來，排成一列，並將center的寬度設為100%，這樣的話就變成兩行了，left和right被擠到了第二行：

要實現上圖的效果就需要用到負值的margin:

 1 .left {
 2             width: 100px;
 3             height: 100px;
 4             float: left;
 5             background: blue
 
;
 6             margin-left: -100%;
 7         }
 8         .right {
 9             width: 100px;
10             height: 100px;
11             float: left;
12             background: green;
13             margin-left: -100px;
14         }

但這樣還不算完成，因為center中的內容被覆蓋了，所以最後一步就是將最外層的box設置左右的padding為left和right的寬度，擠出空間留給left和right，並將left和right都設置絕對定位固定在兩邊，完整代碼：

 1 .box {
 2             height: 100px;
 3             overflow: hidden;
 4             padding: 0 100px;
 5         }
 6         .center {
 7             width: 100%;
 8             height: 100px;
 9             float: left;
10             background: red;
11         }
12         .left {
13             width: 100px;
14             height: 100px;
15             float: left;
16             background: blue;
17             margin-left: -100%;
18             position: relative;
19             left: -100px;
20         }
21         .right {
22             width: 100px;
23             height: 100px;
24             float: left;
25             background: green;
26             margin-left: -100px;
27             position: relative;
28             right: -100px;
29         }

聖杯布局