三栏布局（高度已知，中间自适应）

三栏自适应布局

对于html 采用五种方法实现三栏自适应布局。

<div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

1. 使用float属性

              .box div {
            min-height: 200px;
        }
        .left {
            float: left;
            width: 200px;
            background-color: pink;
        }
        .right {
            float: right;
            width: 300px;
            background-color: blue;
        }
        .center {
            margin-left: 200px;
            margin-right: 300px;
            background-color: green;
        }

2. 采用绝对定位的思想

       .box{
            position: relative;
           }
        .left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .center{
            position: absolute;
            left: 200px;
            right: 300px;
            height:200px;
            background-color:green;
        }
        .right{
            position: absolute;
            right: 0;
            top:0;
            width: 300px;
            height: 200px;
            background-color: blue;
        }

3. flex布局

         .box{
            display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .center{
            height: 200px;
            background-color: green;
            flex:1;
        }
        .right{
            width: 300px;
            height: 200px;
            background-color: blue;
        }

4. table布局

        .box{
            display: table;
            width: 100%; //必须写
        }
        .left{
            display: table-cell;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .center{
            display: table-cell;
            height: 200px;
            background-color: green;
        }
        .right{
            display: table-cell;
            width: 300px;
            height: 200px;
            background-color: blue;
        } 

5. grid 布局

     .box{
            display: grid;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px;
        }
        .left{
            background-color: pink;
        }
        .center{
            background-color: green;
        }
        .right{
            background-color: blue;
        }

上述布局的优缺点：

（1）、浮动：

缺点：脱离文档流，需要清除浮动

优点：兼容性好

（2）、绝对定位：

缺点：因为其本身脱离了文档流，导致其子元素都脱离了文档流，使用性较差

优点：比较快捷

（3）、flex布局：

缺点：只兼容到ie9

优点：目前比较完美的解决方案

（4）、table布局：

缺点：多栏布局时，某栏高度增加，会使其他栏高度一起增加，操作繁琐对seo不够友好

优点：兼容性好，当需要去兼容到ie8时可以使用表格布局

（5）、网格布局：

新技术，代码较少

如果高度不固定，则只有 flex 布局和表格布局直接可用。