圣杯布局

<div class="parent">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
</div>
.parent{
        position: relative;
        width: 100%;
        height: 200px;
        border: 1px solid black;
        box-sizing:border-box;
        padding: 0 100px; //控制真实的width 给两边的left、right预留位置
    }
    .center{
        float: left;//浮动后脱离文档流
        width: 100%;
        height: 100%;
        background-color: antiquewhite;
    }
    .left{
        position: relative;
        float: left;
        width: 100px;
        height: 100%;
        background-color: aqua;
        margin-left: -100%;//因center脱离文档流故减少margin值可以直接顶上去
        left:-100px;//顶上去后会将center遮挡，故将left左移，移到parent预留的位置
    }
    .right{
        right: -100px;
        position: relative;
        margin-left: -100%;
        float: right;
        width: 100px;
        height: 100%;
        background-color: brown;
    }