两列布局（浮动、定位、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;
     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;
     100%;
    height: 100px;
    overflow: hidden;
}

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

.box2 .right {
    margin-left: 100px;
    height: 100px;
     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 {
     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 {
             100%;
            height: 200px;
            background-color: deeppink;
            float:left;
            min-height: 200px;
        }

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

        .container-grail .right {
             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%;
             200px;
            background: red;
        }

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

        .container-fly .main {
             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 {
     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布局/