常见布局整理

流体布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <aside class="left"></aside>
        <aside class="right"></aside>
        <div class="content"></div>
    </main>

这里三栏的 CSS 样式大致如下：

    /* 流体布局 */

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .content {
        margin-left: 200px;
        margin-right: 160px;
    }
BFC 布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <aside class="left"></aside>
        <aside class="right"></aside>
        <div class="content"></div>
    </main>

这里三栏的 CSS 样式大致如下：

    /* BFC */
    
    .left {
        float: left;
    }
    
    .right {
        float: right;
    }
    
    .content {
        overflow: hidden;
    }
绝对定位布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <div class="content"></div>
        <aside class="left"></aside>
        <aside class="right"></aside>
    </main>

这里三栏的 CSS 样式大致如下：

    /* 绝对定位布局 */
    
    main {
        position: relative;
        /* 外层设置 padding */
        /*padding-left: 200px;
        padding-right: 160px;*/
    }
    
    .content {
        /* 或者 内层设置 margin */
        margin-left: 200px;
        margin-right: 160px;
    }
    
    .left {
        position: absolute;
        top: 0;
        /* 外层设置 padding 时才需要 */
        /*left: 0;*/
    }
    
    .right {
        position: absolute;
        top: 0;
        right: 0;
    }
圣杯布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <div class="content"></div>
        <aside class="left"></aside>
        <aside class="right"></aside>
    </main>

这里三栏的 CSS 样式大致如下：

    /* 圣杯布局 */

    main {
        /* 这里不能使用 overflow: hidden; 清除浮动 */
        /* 不然会使 aside(.left & .right) 被 hidden */
        margin-left: 200px;
        margin-right: 160px;
    }
    
    main::after {
        /* 借助伪元素清除浮动 */
        clear: both;
        display: block;
        content: '\200b';
        width: 0;
        height: 0;
    }
    
    .content {
        float: left;
        width: 100%;
    }
    
    .left {
        float: left;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }
    
    .right {
        float: left;
        margin-right: -160px;
    }
双飞翼布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <div class="content-wrapper">
            <div class="content"></div>
        </div>
        <aside class="left"></aside>
        <aside class="right"></aside>
    </main>

这里三栏的 CSS 样式大致如下：

    /* 双飞翼布局 */

    main {
        /* 这里可以使用 overflow: hidden; 清除浮动 */
        overflow: hidden;
    }
    
    .content-wrapper {
        float: left;
        width: 100%;
    }
    
    .content {
        margin-left: 200px;
        margin-right: 160px;
    }
    
    .left {
        float: left;
        margin-left: -100%;
    }
    
    .right {
        float: left;
        margin-left: -160px;
    }
Flex 布局

.content

这里三栏的 HTML 结构大致如下：

    <main>
        <div class="content"></div>
        <aside class="left"></aside>
        <aside class="right"></aside>
    </main>

这里三栏的 CSS 样式大致如下：

    /* Flex 布局 */
    
    main {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        /* 如果不想三栏等高可以取消注释下面这行 */
        /*align-items: flex-start;*/
    }
    
    .content {
        flex-grow: 1;
    }
    
    .left {
        order: -1;
        flex-basis: 200px;
    }
    
    .right {
        flex-basis: 160px;
    }