SOURCE

<!-- 兼容性好，父元素塌陷问题 -->
<section class="layout layout-float">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">
        <h1>float布局</h1>
        <h1>float布局</h1>
        <h1>float布局</h1>
        <h1>float布局</h1>
        <h1>float布局</h1>
    </div>
</section>

<!-- 兼容好，脱离文档流 -->
<section class="layout layout-absolute">
    <div class="left"></div>
    <div class="middle">
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
        <h1>absolute布局</h1>
    </div>
    <div class="right"></div>
</section>

<!-- 兼容性好 -->
<section class="layout layout-table">
    <div class="left"></div>
    <div class="middle">
        <h1>table布局</h1>
        <h1>table布局</h1>
        <h1>table布局</h1>
        <h1>table布局</h1>
        <h1>table布局</h1>
    </div>
    <div class="right"></div>
</section>

<!-- chrome 21+ -->
<section class="layout layout-flex">
    <div class="left"></div>
    <div class="middle">
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
        <h1>flex布局</h1>
    </div>
    <div class="right"></div>
</section>

<!-- chrome 57+ -->
<section class="layout layout-grid">
    <div class="left"></div>
    <div class="middle">
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
        <h1>grid布局</h1>
    </div>
    <div class="right"></div>
</section>

* {
    margin: 0;
}
.layout {
    margin-top: 10px;
}
.left {
    background: red;
}
.right {
    background: blue;
}
.middle {
    background: yellow;
}
.layout, .layout > div {
    min-height: 100px;
}
.layout-float .left {
    float: left;
    width: 300px;
}
.layout-float .right {
    float: right;
    width: 300px;
}
.layout-float .middle {
    margin: 0 300px;
}

.layout-absolute {
    position: relative;
}
.layout-absolute .left {
    position: absolute;
    left: 0;
    width: 300px;
}
.layout-absolute .right {
    position: absolute;
    right: 0;
    width: 300px;
}
.layout-absolute .middle {
    position: absolute;
    left: 300px;
    right: 300px;
}

.layout-table {
    display: table;
    width: 100%;
}
.layout-table .left {
    display: table-cell;
    width: 300px;
}
.layout-table .right {
    display: table-cell;
    width: 300px;
}
.layout-table .middle {
    display: table-cell;
}

.layout-flex {
    display: flex;
}
.layout-flex .left, .layout-flex .right {
    width: 300px;
}
.layout-flex .middle {
    flex: 1 1 auto;
}

.layout-grid {
    display: grid;
    grid-template-columns: 300px auto 300px;
    /*grid-template-rows: auto;*/
}