左右定宽，中间自适应三栏布局

三栏布局（左右定宽，中间自适应）

方法一：圣杯布局

.box1{
    padding: 0 150px 0 200px;
}
.main1,.left1,.right1{
    float: left;
    height: 100px;
    position: relative;
}
.main1{
    width: 100%;
    background-color: yellow;
}
.left1{
    width: 200px;
    background-color: red;
    margin-left: -100%;
    left: -200px;
}
.right1{
    width: 150px;
    background-color: green;
    margin-left: -150px;
    right: -150px;
}

<div class="box1">
     <div class="main1">main</div>
     <div class="left1">left</div>
     <div class="right1">right</div>
</div>

原理：中间块元素必须排列在左右元素之前，全部左浮动并且相对于自身进行定位。给父元素一个左右等于左右元素的padding，就可将左右块的位置让出来。左元素margin-left：-100%时，将上移一行，再left：-200px占据父元素的左内边距。右元素同理。

优点：三栏相关联，具有一定的抗性且不用添加新的DOM；

缺点：浏览器无限放大或缩小时布局会乱；

方法二：双飞翼布局

.content2{
    width: 100%;
    float: left;
}
.main2{
    width: 100%;
    height: 100px;
    background-color: yellow;
    margin: 0 150px 0 200px;
}
.left2{
    width: 200px;
    height: 100px;
    background-color: red;
    margin-left: -100%;
    float: left;
}
.right2{
    width: 150px;
    height: 100px;
    background-color: green;
    margin-left: -150px;
    float: left;
}

<div class="box2">
    <div class="content2">
        <div class="main2">main</div>
    </div>
    <div class="left2">left</div>
    <div class="right2">right</div>
</div>

原理：布局原理与圣杯布局差不多，不同点就是中间元素被一个块元素包起来，然后给中间元素一个左右等于左右元素的margin来让出位置，再负margin回到原来位置。

优点：不会像圣杯布局那样变形；

缺点：增加了一层DOM元素；

方法三：Flex布局

    .box3{
        display: flex;
    }
    .main3{
        width: 100%;
        height: 100px;
        background-color: yellow;
    }
    .left3{
        width: 200px;
        background-color: red;
        height: 100px;
    }
    .right3{
        width: 150px;
        background-color:green;
        height: 100px;
    }

    <div class="box3">
        <div class="left3">left</div>
        <div class="main3">main</div>
        <div class="right3">right</div>
    </div>

缺点：不兼容IE8及以下的浏览器

方法四：BFC规则

    .main4{
        height: 100px;
        background-color: yellow;
        overflow: hidden;
    }
    .left4{
        width: 200px;
        background-color: red;
        height: 100px;
        float: left;
    }
    .right4{
        width: 150px;
        background-color:green;
        height: 100px;
        float: right;
    }

    <div class="box4">
        <div class="left4">left</div>
        <div class="right4">right</div>
        <div class="main4">main</div>
    </div>

原理：BFC不会与浮动元素重叠

方法五：float布局

    .main5{
        height: 100px;
        background-color: yellow;
        margin: 0 150px 0 200px;
    }
    .left5{
        width: 200px;
        background-color: red;
        height: 100px;
        float: left;
    }
    .right5{
        width: 150px;
        background-color:green;
        height: 100px;
        float: right;
    }

    <div class="box5">
        <div class="left5">left</div>
        <div class="right5">right</div>
        <div class="main5">main</div>
    </div>

缺点：需要清除浮动

方法六：绝对定位

    .main6{
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 0;
        left: 200px;
        right: 150px;
    }
    .left6{
        width: 200px;
        background-color: red;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .right6{
        width: 150px;
        background-color:green;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
    }

    <div class="box6">
        <div class="main6">main</div>
        <div class="left6">left</div>
        <div class="right6">right</div>
    </div>

优点：结构简单，且无需清洗浮动

缺点：脱离文档流，子元素也会脱离文档流，有效性和可用性最差

方法七：table-cell布局

    .main7{
        height: 100px;
        background-color: yellow;
        display: table-cell;
        width: 100%;
    }
    .left7{
        min-width: 200px;
        background-color: red;
        height: 100px;
        display: table-cell;
    }
    .right7{
        min-width: 150px;
        background-color:green;
        height: 100px;
        display: table-cell;
    }

    <div class="box7">
        <div class="left7">left</div>
        <div class="main7">main</div>
        <div class="right7">right</div>
    </div>

缺点：当其中一个单元格的高度超出时，其余两个单元格的高度也会变高

方法八：网格布局

    .box8{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 150px;
    }
    .main8{
        background-color: yellow;
    }
    .left8{
        background-color: red;
    }
    .right8{
        background-color:green;
    }

    <div class="box8">
        <div class="left8">left</div>
        <div class="main8">main</div>
        <div class="right8">right</div>
    </div>

缺点：兼容性不太好