三栏布局的左右固定中间自适应

　　常用的布局方法：

　　高度固定的情况：5类一个是设置float浮动布局包括常见的圣杯布局和双飞翼布局、绝对定位布局、table布局、flex布局，grid布局，css布局是掌握css的基础；

　　初始化基础样式

 .layout {
        height: 100px;
        margin-bottom: 10px;
    }

    .layout div {
        height: 100px;
    }

    .left {
        background-color: #ff4b65;
        width: 300px;
    }

    .right {
        background-color: orange;
        width: 300px;
    }

    .middle {
        background-color: #5bc0de;
    }

1、浮动定位，高度固定

<section class="layout">
    <article class="float">
        <div class="left">
            左浮动
        </div>

        <div class="right">
            右侧浮动
        </div>

        <div class="middle">
            1、使用浮动的方法
        </div>
    </article>
</section>

2、绝对定位：

 1 <section class="layout ">
 2     <style>
 3         .absolute div {
 4             position: absolute;
 5         }
 6         .absolute .left {
 7             left: 0;
 8             width: 300px;
 9             background-color: #ff4b65;
10         }
11         .absolute .middle {
12             left: 300px;
13             right: 300px;
14             background-color: #5bc0de;
15         }
16         .absolute .right {
17             right: 0;
18             width: 300px;
19             background-color: orange;
20         }
21     </style>
22     <article class="absolute">
23         <div class="left">
24             左
25         </div>
26         <div class="middle">
27             1、使用绝对定位方法
28         </div>
29         <div class="right">
30             右
31         </div>
32     </article>
33 </section>

3、flex布局方法

 1 <section class="layout">
 2     <style>
 3         .flex {
 4             display: flex;
 5         }
 6 
 7         .middle {
 8             flex: 1;
 9         }
10     </style>
11     <article class="flex">
12         <div class="left">
13             left
14         </div>
15         <div class="middle">3、flex布局</div>
16         <div class="right">
17             right
18         </div>
19     </article>
20 </section>

4、table布局：

<section class="layout">
    <style>
        .table {
            display: table;
             100%;
        }

        .table > div {
            display: table-cell;
        }

    </style>
    <article class="table">
        <div class="left">

        </div>
        <div class="middle">
            4、table布局
        </div>
        <div class="right"></div>
    </article>
</section>

5、grid布局

<section class="layout">
    <style>
        .grid {
            display: grid;
             100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
    </style>
    <article class="grid">
        <div class="left"></div>
        <div class="middle">5、网格布局</div>
        <div class="right">
        </div>
    </article>
</section>

每种布局的对比：

1、每个方案的优缺点：
（1）浮动，需要清除浮动、兼容性比较好
（2）absolute脱离了文档流、所有的子元素都脱离文档流
（3）flex布局实现比较好，IE8不支持
（4）表格布局、兼容性比较好，当其中一个单元格高度超出的时候，两侧是需要跟着调整
（5）网格布局：可以实现比较复杂的布局方式
2、当高度不固定的情况下：flex布局和table布局是可以使用的

<section class="layout-no-height">
    <style>
        .float-b {
            overflow: hidden;
        }

        .float-b .left {
            float: left;
            margin-left: -100%;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }

        .float-b .right {
            float: left;
            margin-left: -300px;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }

        .float-b .middle {
             100%;
            float: left;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }

        .middle .inner {
            margin-left: 300px;
        }

    </style>
    <article class="float-b">
        <div class="middle">
            <div class="inner">
                <div>1、双飞翼布局</div>
                <div>1、双飞翼布局</div>
                <div>1、双飞翼布局</div>
                <div>1、双飞翼布局</div>
            </div>
        </div>
        <div class="left">
            左浮动<br>
        </div>
        <div class="right">
            右侧浮动
        </div>
    </article>

</section>