双飞翼布局

三栏布局（两栏布局）：侧栏宽度固定，中间的主内容区域宽度自适应
主要原理，对浮动元素设置 负margin = 自身宽度，会使元素上移。
html代码

    <div id="content">
        <div class="main">
            <div class="wrap">main</div>
        </div>
        <div class="aside">aside</div>
        <div class="extra">extra</div>
    </div>

CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
    }
    .main{
        width: 100%;
        background-color: #ccc;
        height: 100px;
    }

设置三个元素浮动，并设置相应元素的负margin后，元素会上移。当然浮动后需要清除浮动，这里不做介绍，详情见BFC博客
CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
        float: left;
        margin-left: -100%;/*父容器的宽度*/
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
        float: left;
        margin-left: -50px;/*容器自身的宽度*/
    }
    .main{
        width: 100%;/*必须设置，浮动后元素宽度会塌陷*/
        background-color: #ccc;
        height: 100px;
        float: left;
    }

当然，此时仍有一些问题，比如.main被遮盖住了一部分。

• 对主内容区域设置margin

    .wrap{
            margin: 0 60px;
            background-color: blue;
            height: 100%;
        }

与圣杯布局的区别在于,html代码中

    <div id="content">
        <div class="main">
            <div class="wrap">main</div>/*difference*/
        </div>
        <div class="aside">aside</div>
        <div class="extra">extra</div>
    </div>