实现三栏布局的七种方法第一种：float+margin 第二种：float+bfc 第三种：flex布局第四种：tab

第一种：float+margin

.left{
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    width: 200px;
    height: 200px;
    float: right;
    background: blue;
}
.main{
    height: 200px;
    margin-left: 200px;
    margin-right: 200px;
    background: green;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

第二种：float+bfc

.left {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    float: right;
    background: blue;
    width: 200px;
    height: 200px;
}.main{
    height: 200px;
    overflow: hidden;
    background: green;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

第三种：flex布局

.container{
    height: 200px;
    display: flex;
    justify-content: space-between;
}
.left{
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    width: 200px;
    height: 200px;
    background: blue;
}
.main{
    flex: 1;
    background: green;
}

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

第四种：table布局

.container{
    display: table;
    width: 100%;;
}
.left
{
    height: 200px;
    display:table-cell;
    background: red;
}
.main{
    height: 200px;
    display: table-cell;
    background: blue;
}
.right{
    height: 200px;
    display: table-cell;
    background: green;
}

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

第五种：position

.container{
    position: relative;
}
.left{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    background: red;
}
.right{
    position: absolute;
    width: 200px;
    height: 200px;
    background: blue;
    /* 必须写这个 和 main书写位置有关系*/
    /* top: 0; */
    right: 0;
}
.main{
    height: 200px;
    margin: 0 200px;
    background: green;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <!-- main写在中间得加top -->
    <div class="main"></div>
</div>

第六种：圣杯布局

.container{
    margin: 0 200px;
}
.main{
    float: left;
    width: 100%;
    height: 200px;
    background: red;
}
/* 被注释的地方还可以用相对定位去实现 
    position:relative;
    left:-200px;/right:-200px;
*/
.left{
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    /* transform: translateX(-200px); */
    background: blue;
}
.right{
    float: left;
    width: 200px;
    height: 200px;
    /* transform: translateX(200px); */
    margin-left: -200px;
    background:green;
}

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

第七种：双飞翼布局

<style>
    .container {
        float: left;
        width: 100%;
        height: 200px;
        background: red;
    }

    .main {
        margin: 0 200px;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        margin-left: -100%;
        background: blue;
    }

    .right {
        float: left;
        width: 200px;
        height: 200px;
        margin-left: -200px;
        background: green;
    }
</style>

<body>
    <div class="container">
        <div class="main"></div>
    </div>
        <div class="left"></div>
        <div class="right"></div>
</body>