#前端7班+余愿

做雙杯布局的原理和兩欄布局的原理差不多，首先也是先把基本的div寫出來

添加樣式：

頁面實現(xiàn)

這個時候，要實現(xiàn)兩個側(cè)邊欄分別在main的左右兩邊，可以用浮動和負邊距。

首先將兩個側(cè)邊欄和main都浮動，這時候就會出現(xiàn)以下情況

因為content部分的側(cè)邊欄和main都浮動了，脫離了文檔流，在頁面上實現(xiàn)的效果擋住了尾部，而尾部的文字卻圍繞在浮動元素的周圍。這時候就需要給父容器添加清除浮動。

尾部就出來了

這是再用上負邊距，給側(cè)邊欄1設(shè)置margin-left:-100%和側(cè)邊欄2設(shè)置margin-left:100px。效果如下：

為什么側(cè)邊欄1設(shè)置的是100%，而側(cè)邊欄2設(shè)置的是100px呢。100%表示的是寬度移動父容器的100%，因為父容器的寬度是不一定的，設(shè)置為100%就可以根據(jù)父容器的寬度變化而變化。側(cè)邊欄2的100px，是因為側(cè)邊欄2的寬度為100px，如果設(shè)置為99px，則側(cè)邊欄2無法上到main的右邊。

由圖可以看出，兩個側(cè)邊欄分別在main的兩側(cè)了，可是此時兩個側(cè)邊欄都擋住了中間的main。

此時給包裹main和側(cè)邊欄的父容器content設(shè)置一個padding：0 100px；效果如下

再使用定位將側(cè)邊欄1放到左邊，將側(cè)邊欄2放到右邊。

效果如下，圣杯布局就出來了~

圣飛翼布局就是在main被兩邊的側(cè)邊欄被擋住時，解決方法不一樣的布局方式。

在main被兩邊側(cè)邊欄擋住時，雙杯布局用的方法是給content添加左右內(nèi)邊距，用相對定位使側(cè)邊欄分別靠左和靠右。圣飛翼布局的解決方式是，在main里面再加一個div.wrap，將主要內(nèi)容放在wrap里面，這樣就不需要再使用定位。

在main里加一個wrap，

添加樣式

效果如下