双飞燕布局

布局的效果跟圣杯的一样，代码有所不同。双飞燕布局的代码更加简单，只是多加了一个div用来布局。
基础布局部分代码一样。

main部分：

<style>
    #main {overflow: hidden;zoom: 1;}/*这里不需要加padding了*/
    .m_content, .m_leftside, .m_rightside {float: left;}
    .m_content {width: 100%;}
    /*用左右边距将左右边栏的位置预留出来*/
    .m_c_wrap {margin-left: 220px;margin-right:300px;}
    .m_leftside {width: 220px;margin-left: -100%;}
    .m_rightside {width: 300px;margin-left: -300px;}
</style>

<div id="main">
    <div class="m_content">
        <!--正真的主体开始-->
        <div class="m_c_wrap">这里是主体</div>
    </div>
    <div class="m_leftside">这是左侧边栏</div>
    <div class="m_rightside">这是右侧边栏</div>
</div>

了解了以上两种布局的方法后，很多布局都能写得得心应手了。但是应对多栏等高布局还有点欠缺。那么现在来谈谈多栏等高布局的方法。