如何实现圣杯布局&双飞翼布局

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局.

圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

1.三列布局，中间宽度自适应，两边定宽；

2.中间栏要在浏览器中优先展示渲染；

3.允许任意列的高度最高；圣杯布局和双飞翼布局要求一样

要点：需要先写内容区，后渲染内容区

圣杯布局

实现要点：
1. 中间内容区域+左、右区域都左浮，使三块数据在同一行；
2. 左、右设置固定宽度，中间内容区设置100%宽；
3. 给left元素设置margin-left:-100%;right元素设置margin-left:-元素宽,让left，right元素和content元素能并排显示
4. 容器设置padding给左右两列预留位置，padding大小分别为左右两列的宽度
5. 给left和right设置position:relative，设置left元素(left-自身宽度)，right元素(right:-自身宽度)

代码

<style>
    .box{
    
        min-height:300px;
        margin:0 auto;
        padding: 0 200px 0 100px;
    }
    header,footer{
    
        height:50px;
        background: gray;
    }
    .box div{
    
        height:400px;
        float: left;
        position: relative;
    }
    .clearfix::after{
    
        content: '.';
        display: block;
        clear: both;
        height:0px;
        font-size:0px;
    }
    .left{
    
        width:100px;
        margin-left: -100%;
        left:-100px;
    }
    .right{
    
        width:200px;
        margin-left:-200px;
        right:-200px;
    }
    .content{
    
        width: 100%;
    }
</style