浮動(dòng)布局

    <!-- 浮動(dòng)布局 -->
    <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>浮動(dòng)布局</h2>
                浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局 
                浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局
                浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局 
            </div>
        </article>
    </section>

缺點(diǎn): 需要清除浮動(dòng).
優(yōu)點(diǎn): 兼容性好
注: center 盒子必須放在最后

絕對(duì)定位布局

    <!-- 絕對(duì)定位布局 -->
    <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>絕對(duì)定位布局</h2>
                    絕對(duì)定位布局 絕對(duì)定位布局 
                    絕對(duì)定位布局 絕對(duì)定位布局
                    絕對(duì)定位布局 絕對(duì)定位布局 
                    絕對(duì)定位布局 絕對(duì)定位布局
                </div>
            <div class="right">右邊</div>
        </article>
    </section>

注: 這種辦法會(huì)讓整個(gè)布局脫離文檔流.

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>

缺點(diǎn): 兼容性問題
優(yōu)點(diǎn): 解決以上兩種布局存在的問題
注:目前比較主流的移動(dòng)端布局方式

表格布局

    <!-- 表格布局 -->
    <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>

注:該方式在實(shí)際項(xiàng)目開發(fā)中已經(jīng)淘汰.

網(wǎng)格布局

    <!-- 網(wǎng)格布局 -->
    <section class="layout grid">
        <style>
            .layout.grid .container {
                display: grid;
                width: 100%;
                /* 設(shè)置高度 */
                grid-template-rows: 100px;
                /* 設(shè)置行數(shù) */
                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>網(wǎng)格布局</h2>
                網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
                網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
                網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
                網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
            </div>
            <div class="right">右邊</div>
        </article>
    </section>

注:黑科技