兩列布局（浮動、定位、flex）和三列布局（聖杯、雙飛翼、flex）

demo 各種布局演示 https://jsfiddle.net/mayufo/qp890peq/1/

兩欄布局

浮動

<div class="box1">
    <div class="left">left1</div>
    <div class="right">right1</div>
</div>

.box1 .left{
    float: left;
    width: 100px;
    height: 100px;
    background: yellow;
}

.box1 .right {
    margin-left: 100px;
    height: 100px;
    background: green;
}

定位

<div class="box2">
    <div class="left">left1</div>
    <div class="right">right1</div>
</div>

.box2 {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.box2 .left{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
}

.box2 .right {
    margin-left: 100px;
    height: 100px;
    width: 100%;
    background: green;
}

flex

<div class="box3">
    <div class="left">left1</div>
    <div class="right">right1</div>
</div>

.box3 {
    display: flex;
    height: 100px;
    overflow: hidden;
}

.box3 .left {
    width: 100px;
    height: 100%;
    background-color: red;
}

.box3 .right {
    flex:1;
    height: 100%;
    background-color: greenyellow;
}

三欄布局

聖杯布局

<div class="container-grail">
    <div class="middle">三列布局是一種很常見的頁面布局方式，三列一般分別是子列sub、主列main和附加列extra，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。
        聖杯布局和雙飛翼布局都可以實現這種三列布局，他們有什么特別之處呢？</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer"></div>
</div>

.container-grail {
            height: 200px;
            padding: 0 200px;
        }

        .container-grail .middle {
            width: 100%;
            height: 200px;
            background-color: deeppink;
            float:left;
            min-height: 200px;
        }

        .container-grail .left {
            width: 200px;
            height: 200px;
            background: blue;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
            min-height: 200px;
        }

        .container-grail .right {
            width: 200px;
            height: 200px;
            background: green;
            float: left;
            margin-left: -200px;
            position: relative;
            right: -200px;
            min-height: 200px;
        }
        .footer{
            clear: both;
        }

雙翼布局

<div class="container-fly">
    <div class="main">
        <div class="main-inner">雙翼布局</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer"></div>
</div>

 .container-fly {
            height: 200px;
        }

        .container-fly .main, .container-fly .left, .container-fly .right {
            float: left;
            min-height: 200px;
        }

        .container-fly .left {
            margin-left: -100%;
            width: 200px;
            background: red;
        }

        .container-fly .right {
            margin-left: -200px;
            width: 200px;
            background: blue;
        }

        .container-fly .main {
            width: 100%;
        }

        .container-fly .main-inner {
            margin: 0 200px 0 200px;
            min-height: 200px;
            background: green;

        }
        .footer{
            clear: both;
        }

flex

<div class="container-flex">
    <div class="main">我是主體(優先加載)</div>
    <div class="left">左邊(固定寬度)</div>
    <div class="right">右邊(固定寬度)</div>
</div>

.container-flex {
    display: flex;
}

.container-flex div {
    height: 100px;
}

.container-flex .left {
    order: -1
}

.container-flex .main {
    flex-grow: 1;
    background: red;
}

.container-flex .left, .container-flex .right {
    width: 200px;
    background: greenyellow;
}

相同點

聖杯和雙飛翼布局解決問題一半是相同的，三欄全部float浮動，左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄布局

不同在

聖杯布局，為中間的div內容不被遮擋，將中間div設置了左右padding，將左右兩個div用相對布局position:relative分別配合right和right屬性，以便左右兩欄div移動后不遮擋中間div

雙飛翼布局，為了中間div內容不被遮擋，之間在中間div內容創建子div用於放置內容，在該div里用margin為左右兩欄div留出位置

參考

http://www.cnblogs.com/woodk/p/5147085.html

https://liruihaod.github.io/2016/06/19/從雙飛翼、聖杯布局認識flex布局/