<section class="layout float">
    <style media="screen">
        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: red;
        }

        .layout.float .center {
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
        </div>
    </article>
</section>

<section class="layout absolute">
    <style media="screen">
        .layout.absolute .left-right-center > div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: red;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }

        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: red;
        }

    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

<section class="layout flexbox">
    <style media="screen">
        .layout.flexbox {
            margin-top: 140px;
        }

        .layout.flexbox .left-right-center {
            display: flex;
        }

        .layout.flexbox .left {
            width: 300px;
            background: red;
        }

        .layout.flexbox .center {
            flex: 1;
            background: yellow;
        }

        .layout.flexbox .right {
            width: 300px;
            background: red;
        }

    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>flex布局解决方案</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

<section class="layout table">
    <style media="screen">
        .layout.table .left-right-center {
            width: 100%;
            display: table;
            height: 100px;
        }

        .layout.table .left-right-center > div {
            display: table-cell;
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            background: yellow;
        }

        .layout.table .right {
            width: 300px;
            background: red;
        }

    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>table布局解决方案</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

<section class="layout grid">
    <style media="screen">

        .layout.grid .left-right-center {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left {
            background: red;
        }

        .layout.grid .center {
            background: yellow;
        }

        .layout.grid .right {
            background: red;
        }

    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>网格布局解决方案</h1>
        </div>
        <div class="right"></div>
    </article>
</section>

<!--两栏布局 左右-->
<section class="layout two-grid">
    <style media="screen">
        .layout.two-grid .left-right {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: auto 300px ;
        }

        .layout.two-grid .left {
            background: red;
        }

        .layout.two-grid .right {
            background: yellow;
        }

    </style>
    <article class="left-right">
        <div class="left"></div>
        <div class="right">
            <h1>网格布局解决方案</h1>
        </div>
    </article>
</section>

<!--两栏布局 上下-->
<section class="layout two-grid">
    <style media="screen">
        .layout.two-grid .top-bottom{
            width: 100%;
            display: grid;
            grid-template-rows: 300px auto ;
            grid-template-columns:  100px;
        }

        .layout.two-grid .top {
            background: red;
        }

        .layout.two-grid .bottom {
            background: yellow;
        }

    </style>
    <article class="top-bottom">
        <div class="top"></div>
        <div class="bottom">
            <h1>网格布局解决方案</h1>
        </div>
    </article>
</section>

以上是五种解决方案，这五种方案的优缺点分别是：

            浮动优点：兼容性比较好
                    缺点：脱离文档流

            绝对定位优点：快捷
                    缺点：布局脱离文档流

            flex布局优点：比较完美

            table布局优点：兼容性最好
                     缺点：当其中一个单元格的内容超出高度，其它的单元格也跟着撑开

            grid布局优点：1、固定和灵活的轨道尺寸;
                         2、可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置;
                         3、可以将多个项目放入网格单元格或区域中,它们可以彼此部分重叠。
                    缺点:兼容性不太好。

如果此文对你有用请动动你的小手点个赞！谢谢！！！