简单的 圣杯（双飞翼）布局方法

        
        .clearfix:after{
            content:"";/*设置内容为空*/
            height:0;/*高度为0*/
            line-height:0;/*行高为0*/
            display:block;/*将文本转为块级元素*/
            visibility:hidden;/*将元素隐藏*/
            clear:both;/*清除浮动*/
        }
        .clearfix{
            zoom:1;/*为了兼容IE*/
        }

方法一：float 浮动方法

// html

    

    

    

      // css 样式
        .container {
            width: 100%;
            height: 100%;
            padding: 0 200px;
        }

        .left, .right {
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }

        .center {
            width: 100%;
            min-height: 400px;
            background: #e4b9c0;
        }

        .left, .center, .right {
            float: left;
        }

        .left {
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right {
            margin-right: -200px;
        }

方法二：.center 在 .container 内部

.container,.left,.right{
    float: left;
}
.container{
    width: 100%;
}
.container .center{
    margin: 0 200px;
    min-height: 400px;
    background: #e4b9c0;
}
.left, .right {
    width: 200px;
    min-height: 200px;
    background: lightblue;
}
.left {
    margin-left: -100%;
}
.right{
    margin-right: 0px;
}

方法三：flex 方法

.container{
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.left,.right{
    flex:0 0 200px;
    min-height: 200px;
    background: lightblue;
}
.center{
    flex:1;
    min-height: 400px;
    background: #e4b9c0;
}

方法四

.container{
    position: relative;
    height: 100%;
}
.left,.right{
    position: absolute;
    top:0;
    width: 200px;
    min-height: 200px;
    background: lightblue;
}
.left{
    left:0;
}
.right{
    right:0;
}
.center{
   margin: 0 200px;
    min-height: 400px;
    background: #e4b9c0;
}