三栏布局-（左右固定，中间自适应，高度已知）

如题：已知高度，实现三栏布局：左右固定宽度，中间自适应。

1、使用浮动布局(float)：

 <!-- 浮动布局 -->
    <section class="layout float">
       <style>
        .layout article div {
            min-height: 100px;
        }
        
        .layout.float .left {
            width: 300px;
            background: red;
            float: left;
        }
        
        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }
        
        .layout.float .center {
            background: yellow;
        }
       </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h2>浮动布局</h2>
                1、这是三栏布局中间部分 2、这是三栏布局中间部分
            </div>
        </article>
    </section>

2、使用绝对定位(absolute):

    <!-- 绝对定位布局 -->
    <section class="layout absolute">
        <style>
         .layout.absolute .left-center-right {
            position: relative;
        }
        
        .layout.absolute .left-center-right>div {
            position: absolute;
            min-height: 100px;
        }
        
        .layout.absolute .left {
            width: 300px;
            background: red;
            left: 0;
        }
        
        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }
        
        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right" style="overflow: hidden;height: 100px;">
            <div class="left"></div>
            <div class="center">
                <h2>绝对定位布局</h2>
                1、这是三栏布局中间部分 2、这是三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

3、使用flexbox布局：

    <!-- flex布局 -->
    <section class="layout flex">
        <style>
        .layout article div {
            min-height: 100px;
        }
        .layout.flex .left-center-right {
            display: flex;
        }
        
        .layout.flex .left {
            width: 300px;
            background: red;
        }
        
        .layout.flex .center {
            width: 300px;
            background: yellow;
            flex: 1;
        }
        
        .layout.flex .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>flex布局</h2>
                1、这是三栏布局中间部分 2、这是三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>        

4、table布局：

    <!-- table布局 -->
    <section class="layout table">
        <style>
         .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }
        
        .layout.table .left-center-right>div {
            display: table-cell;
        }
        
        .layout.table .left {
            width: 300px;
            background: red;
        }
        
        .layout.table .center {
            background: yellow;
        }
        
        .layout.table .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>table布局</h2>
                1、这是三栏布局中间部分 2、这是三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

5、网格布局(grid):

    <!-- 网格布局 -->
    <section class="layout grid">
        <style>
         .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px;
        }
        
        .layout.grid .left {
            background: red;
        }
        
        .layout.grid .center {
            background: yellow;
        }
        
        .layout.grid .right {
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>网格布局</h2>
                1、这是三栏布局中间部分 2、这是三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

6、扩展：

上述布局的优缺点：

（1）、浮动：

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

　　优点：兼容性好

（2）、绝对定位：

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

　　优点：比较快捷

（3）、flex布局：

　　缺点：只兼容到ie9

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

（4）、table布局：

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

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

（5）、网格布局：

　　新技术，代码较少

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