雙飛翼佈局、聖代佈局（聖盃 囧）

設置3個div

<div class = 'main'>

<div class = 'left;>

<div class = 'right>

main放在首位是由於通常渲染時候的順序，咱們會想讓main比較快地渲染出來，因此div-main放上面

一、若是咱們設置不設置div-main，設置div-left（float :left）  div-right(float：right）

那麼div-main會單獨一行，左右會單獨佔據下一行的左右不分(在文檔流之外浮動，至關於覆蓋在文檔流上面)

二、咱們是想一行中讓div-main在中間，div-left在左邊,div-right在右邊。那麼咱們如今設置div-main爲float：right，那麼div-main也會脫離文檔流，如今三個就會在一行啦

可是如今的問題是，div-main和div-left會根據div-main的寬度左右貼緊，並且div-left和div-right中間有差距，就達不到所有佔據一行的效果了，並且div-main會居於左邊，

上圖：  

三、如今，咱們把div-main設置爲塊元素（width：100%，會佔據一整行），而且float：left

如今，div-main佔據了一行。下面div-left和div-right 居左右，哎~怎麼感受和以前同樣了呀，其實不同，由於如今main是float了，如今就能夠進行margin負邊距了；

如今三個div的float都設置了，如今設置div-left負邊距margin-left：-100%；看看效果

如今div-left跑到main的左邊來了，其實它是覆蓋上去了，只有當main和left都設置了float纔會這樣，若是main沒有設置float，上圖吧

左邊的消失了，爲啥呢。原來，maigin-left設置了-100%後，他就遠離了這一行，其實它還在這裏，只是看不見了，太遠了，因此如今明白咱們要把main的float設置爲left的緣由了吧。

接下來，對我是右邊也同樣操做，設置maigin-left：-100px，float：left

如今顯示

可是如今還有一個問題，咱們的main的內容呢，實際上是被left的內容覆蓋咯，咱們先設置整個包含盒子的padding-left：100px；padding-right：100px；

就成這樣了，而後咱們把left的position:relative;left:-100px;（意思就是它相對本身移動了100px，100px是它本身的width，relative是個小hack吧。。如今才知道 - -）

right的也同樣 position ：relative ；right：-100px

大功告成咯。這就是聖代- -聖盃佈局咯

可是吧。由於left和right都設置了relative，這對後面的維護來講多是致命的，並且設置了padding-left和padding-right的盒子對後面的維護也不利，因此雙飛翼誕生了

先把那些不利的設置都去掉，

在div-main裏面加一個div-inner包裹內容

設置div-inner的margin-left：100px；margin-right：100px

如今是否是能夠啦，我感受裏面設置了inner的屬性，就至關於把裏面的內容縮小了，由於要留出來maigin啊，總共就width=100%，不能再擴展。裏面的就只能爲了maigin而縮回去啦，把margin設置爲左邊和右邊的寬度就能夠實現這個雙飛翼佈局啦~