浮動布局

    <!-- 浮動布局 -->
    <section class="layout float">
        <style>
            .layout.float .left {
                width: 100px;
                float: left;
                background: red;
            }

            .layout.float .right {
                width: 100px;
                float: right;
                background: blue;
            }

            .layout.float .center {
                background: yellow;
            }
        </style>
        <article class="container">
            <div class="left">左邊</div>
            <div class="right">右邊</div>
            <div class="center">
                <h2>浮動布局</h2>
                浮動布局浮動布局 浮動布局浮動布局 
                浮動布局浮動布局 浮動布局浮動布局
                浮動布局浮動布局 浮動布局浮動布局 
            </div>
        </article>
    </section>

缺點: 需要清除浮動.
優點: 兼容性好
注: center 盒子必須放在最后

絕對定位布局

    <!-- 絕對定位布局 -->
    <section class="layout absolute">
        <style>
            .layout.absolute .left {
                position: absolute;
                left: 0;
                width: 100px;
                background: red;
            }

            .layout.absolute .right {
                width: 100px;
                right: 0;
                position: absolute;
                background: blue;
            }

            .layout.absolute .center {
                position: absolute;
                left: 100px;
                right: 100px;
                background: yellow;
            }
        </style>
        <article class="container">
            <div class="left">左邊</div>
            <div class="center">
                    <h2>絕對定位布局</h2>
                    絕對定位布局 絕對定位布局 
                    絕對定位布局 絕對定位布局
                    絕對定位布局 絕對定位布局 
                    絕對定位布局 絕對定位布局
                </div>
            <div class="right">右邊</div>
        </article>
    </section>

注: 這種辦法會讓整個布局脫離文檔流.

flexbox布局

    <!-- flexbox布局 -->
    <section class="layout flexbox">
        <style>
            .layout.flexbox .container {
                display: flex;
            }

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

            .layout.flexbox .right {
                width: 100px;
                background: blue;
            }

            .layout.flexbox .center {
                flex: 1;
                background: yellow;
            }
        </style>
        <article class="container">
            <div class="left">左邊</div>
            <div class="center">
                <h2>flexbox布局</h2>
                flexbox布局 flexbox布局 
                flexbox布局 flexbox布局 
                flexbox布局 flexbox布局 
                flexbox布局 flexbox布局
            </div>
            <div class="right">右邊</div>
        </article>
    </section>

缺點: 兼容性問題
優點: 解決以上兩種布局存在的問題
注:目前比較主流的移動端布局方式

表格布局

    <!-- 表格布局 -->
    <section class="layout table">
        <style>
            .layout.table .container {
                display: table;
                width: 100%;
                height: 100px;
            }

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

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

            .layout.table .right {
                width: 100px;
                background: blue;
            }

            .layout.table .center {
                background: yellow;
            }
        </style>
        <article class="container">
            <div class="left">左邊</div>
            <div class="center">
                <h2>表格布局</h2>
                表格布局表格布局表格布局
                表格布局表格布局表格布局
                表格布局表格布局表格布局
            </div>
            <div class="right">右邊</div>
        </article>
    </section>

注:該方式在實際項目開發中已經淘汰.

網格布局

    <!-- 網格布局 -->
    <section class="layout grid">
        <style>
            .layout.grid .container {
                display: grid;
                width: 100%;
                /* 設置高度 */
                grid-template-rows: 100px;
                /* 設置行數 */
                grid-template-columns: 100px auto 100px;
            }

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

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

            .layout.grid .center {
                background: yellow;
            }
        </style>
        <article class="container">
            <div class="left">左邊</div>
            <div class="center">
                <h2>網格布局</h2>
                網格布局網格布局網格布局
                網格布局網格布局網格布局
                網格布局網格布局網格布局
                網格布局網格布局網格布局
            </div>
            <div class="right">右邊</div>
        </article>
    </section>

注:黑科技