圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM結構如下：
流程解說
接下來，讓我們一步一步地實現圣杯布局；
1、 首先分別浮動main、sub、extra三列， 然后利用負外邊距把sub列和extra列定位到左右兩邊。這時的CSS代碼如下：
2、 完成上步后，sub和extra列已經到了正確的位置，但是sub和extra列卻覆蓋了main的兩邊，對于這個問題，圣杯布局的解決辦法是給容器container添加左、右內邊距，從而讓main列定位到正確的位置。
3、 完成第二步后又出現了新問題：sub、extra列也受到容器左右內邊距的影響位置發生了移動。為了解決這個問題，圣杯布局使用相對定位使sub、extra列回到正確的位置。新添加代碼如下：
新聞熱點
疑難解答
