经典三栏布局

圣杯布局

DOM 结构

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        div {
            box-sizing: border-box;
        }

        .container {
            width: 100%;
            height: 100%;
            padding-left: 200px;
            padding-right: 300px;
        }

        .center,
        .left,
        .right {
            position: relative;
            float: left;
            height: 100%;
        }

        .center {
            width: 100%;
            background-color: red;
        }

        .left {
            left: -200px;
            width: 200px;
            margin-left: -100%;
            background-color: green;
        }

        .right {
            right: -300px;
            width: 300px;
            margin-left: -300px;
            background-color: greenyellow;
        }

container利用padding固定左右宽度,center撑满宽度,再利用float让三栏全部脱离文档流, 只有用margin负值让两栏进入到center的左边和右边,再利用相对位移放置到正确的位置

双飞翼布局

DOM 结构

<div id="container">
    <div id="center"></div>
</div>
<div id="left"></div>
<div id="right"></div>

css

        html,
        body {

            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }

        div {
            box-sizing: border-box;
        }

        .container,
        .left,
        .right {
            float: left;
            height: 100%;
        }

        .container {
            width: 100%;
        }

        .center {
            margin-left: 200px;
            margin-right: 300px;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            background-color: green;
        }

        .right {
            width: 300px;
            margin-left: -300px;
            background-color: greenyellow;
        }

从 dom 结构上看圣杯像是一杯子包裹着整个 dom，双飞翼则是把两个翅膀放在了下面。双飞翼同样是让dom浮动起来，让center的container占据整个页面，center提供margin来占位，left和right利用负margin进入正确的位置即可。

flex 版本

应该是最简单的版本了，随便写~

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.container {
    display: flex;
    height: 100%;
}

.left,
.right,
.center {
    height: 100%;
}

.left,
.right {
    width: 200px;
    background-color: red;
}

.center {
    flex: 1;
    background-color: blue;
}

其实对 flex 而言，dom 结构不是特别重要，即使是 center 在最上面，也可以通过 order 来进行元素的排序

BFC 版本

看这里~BFC和SC