【聊一聊】css中的經典佈局——雙飛翼佈局

    上一文，【聊一聊】css中的經典佈局——聖盃佈局中，我介紹過，聖盃佈局不添加額外的標籤（主要是隻中間塊）。在不增長額外標籤的狀況下，聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多，那麼有沒其餘方法更加簡潔方便呢？

    今天，咱們來認識一下它的小夥伴——雙飛翼佈局。

    在淘寶UED探討下，增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局。

    DOM結構：main內層增長了一個div

    <div class="header">Header</div>
    <div class="bd">
        <div class="main">
            <div class="inner">Mian</div>
        </div>
        <div class="left">Left</div>
        
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>

樣式：去掉了左右欄的相對定位，去掉包裹層padding，以中間欄新增div的margin代替

*{
        padding:0;margin:0;
    }
    .header,.footer{
        height:50px;
        width:100%;
        background:#666;
        clear:both;
    }
    .bd{
        /* padding-left:150px;
        padding-right:190px; */
    }
    .main{
        width:100%;
        float:left;
        background:#D6D6D6;
    }
    .left{
        width:150px;
        background:#E79F6D;
        float:left;
        margin-left:-100%;  /*相對於包含快的寬度*/
        /* position:relative;
        left:-150px; */
    }
    .right{
        float:left;
        width:190px;
        background:#77BBDD;
        margin-left:-190px;
        /* position:relative;
        right:-190px; */
    }
    .inner{
        margin-left:150px;
        margin-right:190px;
    }

 這個佈局還有個好處，讓Main變成BFC元素了，屏幕寬度縮小Main也不會被擠下去，聖盃佈局就會被擠下去。