【聊一聊】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也不會被擠下去，聖杯布局就會被擠下去。