圣杯布局和双飞翼布局

首先通过定两遍的宽和中间自适应100%来完成基本的大小设置，然后都用左浮动来设置基本布局，之后用负margin来将左右两遍提到中间的同一行，左边设margin:-100%，右边设margin:-xxpx，这时候会发现左右两遍把中间遮住了，处理遮住的地方才是两个布局的区别。

圣杯布局

通过设置最外面元素的padding为左右两遍的宽来把中间的位置流出，然后用position:relative来把左右位置复位，左边用left:xxpx，右边用right:xxpx

该布局的最小宽度是左+左+右 在该例中应该是600px

这里用padding是因为为了清除浮动将外元素设置为overflow:hidden，如果用margin会看不见左右

body {
    height: 500px;
}
.main {
    height: 100%;
    min-width: 600px;
    position: relative;
    padding: 0 200px;
    overflow: hidden;
}
.main > div {
    height: 100%;
    float: left;
    position: relative;
}

.center {
    width: 100%;
    background-color: beige;
}
.left {
    width: 200px;
    margin-left: -100%;
    left: -200px;
    background-color: aquamarine;
}
.right {
    width: 200px;
    margin-left: -200px;
    right: -200px;
    background-color: aqua;
}

<div class="main">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局

在中间元素中再嵌套一个元素，然后通过嵌套元素设置左右margin来实现

该布局的最小宽度是左+右 在该例中是400px 实际上应该再加点

.main {
    height: 500px;
    min-width: 400px;
    div {
        height: 100%;
        float: left;
    }
    .center {
        width: 100%;
        background-color: antiquewhite;
        .content {
            margin: 0 200px;
        }
    }
    .left {
        width: 200px;
        margin-left: -100%;
        background-color: aqua;
    }
    .right {
        width: 200px;
        margin-left: -200px;
        background-color: aquamarine;
    }
}

<div class="main">
    <div class="center">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>