其實(shí)二者最終實(shí)現(xiàn)的效果是一樣的，只不過實(shí)現(xiàn)上有所不同，一個(gè)是利用內(nèi)padding，而另一個(gè)則是容器內(nèi)孩子的外margin

二者均實(shí)現(xiàn)優(yōu)先加載中間內(nèi)容，兩邊懶加載，最終效果就是left middle right這樣布局，左右兩邊可以指定寬度，中間寬度自適應(yīng)，整體的高度由三者中最高者決定。

圣杯布局

首先準(zhǔn)備一個(gè)容器，容器內(nèi)依次擺放middle，left，right，容器應(yīng)設(shè)置overflow:hidden;為什么這樣做呢？主要是三者均是float:left;所以會(huì)脫離文檔流，為了避免這種情況的出現(xiàn)。

其次設(shè)置左右寬高，中間高度，容器左右內(nèi)邊距

然后設(shè)置左右左外邊距

最后通過相對(duì)定位擺好位置

代碼如下：

html部分

css部分

效果如下：

雙飛翼布局

不用設(shè)置相對(duì)定位，但需要設(shè)置孩子外邊距給撐開

代碼如下：

html部分：

css部分：

效果如下：