圣杯布局

• html

 <div class="content">
        <div class="main">
            中间自适应区域
        </div>
        <div class="left">
            <p>I'am left</p>
        </div>
        <div class="right">
            <p>I'am right</p>
        </div>
    </div>

*css

*{
    padding: 0;
    margin: 0;
}
.content{
    box-sizing: border-box;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
}
.main{
    background: #f66;
    width: 100%;
    float: left;
    height: 100px;
}
.left{
    background:#fcc;
    width: 200px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
    height: 50px;
}
.right{
    position: relative;
    right: -200px;
    background: #fcc;
    width: 200px;
    float: left;
    margin-left: -200px;
    height: 60px;
}

*有几点需要注意一下：

1. 中间自适应的区域在结构上要放在left和right之上。 
2. content（即包裹在最外面的那一层div）他必须是box-sizing：border-box。因为只有这样在后面设置其padding值时，他才会把内容里面的三个div全部挤进来而不是扩充出去。 
3. 负margin的使用原理是对float元素移动到上面。left的margin-left设置为-100%得到的值是-父元素的宽度，即left将会跑到main的左边。right设置为-200px则是让right移动到main的右边。但同时，由于float属性他们会挡住main的显示。 
4. 于是需要使用position定位，将left和right分别定位到最左端和最右端。