圣杯布局和双飞翼布局的理解与实现

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。两者也都采用伪等高布局来实现三列允许一列内容撑开高度，其他两列随之高度增高而改变

圣杯布局:

浮动：搭建完整的布局框架
margin为负值：调整旁边两列的位置，使三列布局到一行
使用相对定位调整两头的位置，使其调整到两头

css:

 * {
            margin: 0;
            padding: 0;
        }
        body{
            min-width:600px;

        }
        #content{
            padding: 0 200px;
            overflow: hidden;/*伪等高布局，隐藏溢出*/
        }
        #header,#footer{
            height: 20px;
            text-align: center;
            border:1px solid blue;
            background-color: gray;

        }
        /*伪等高布局*/
        #content #middle,#content #left,#content #right{
            padding-bottom: 10000px;
            margin-bottom:-10000px;
        }


        #content #middle{
            float: left;
            width:100%;
            background-color: pink;
        }

        #content #left{
            position: relative;
            left:-200px;
            margin-left:-100%;
            float: left;
            width: 200px;
            background-color: yellow;
        }
        #content #right{
            position: relative;
            right: -200px;
            margin-left:-200px;
            float: left;
            width: 200px;
            background-color: yellow;
        }


        /*清除浮动，让子元素撑开父元素高度*/
        .clearfix{
            *zoom:1;
        }
        .clearfix:after{
            content:"" ;
            display: block;
            clear:both;
        }

<div id="header">header</div>
<div id="content" class="clearfix">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</br>
        right </br>
        right </br>
        right </br>
        right </br>
        right </br>right </br>right </br>right </br>
        right </br>right </br>right </br>right </br>right </br>right </br>
    </div>
</div>
<div id="footer">footer</div>

双飞翼布局：

    双飞翼布局和圣杯布局都是让三列浮动，然后通过负外边距形成三列布局
    两种方式不同之处在于处理中间主列的位置：
    圣杯布局是利用父容器的左右内边距+两从列相对定位
    双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左右内边距进行布局调整

 *{
            margin: 0px;
            padding: 0px;
        }
        body{
            /*为了使内容全部显示，要设置最小宽度 两倍左宽+又宽*/
            min-width: 600px;
        }
        #content{
            overflow: hidden;
        }
        #header,#footer{
            border:1px solid red;
            text-align: center;
            background:gray;
        }
        #content .middle,#content .right,#content .left{
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            height: 50px;
            line-height: 50px;
            float: left;
        }
        #content .middle .m_inner{
            padding: 0 200px;
        }
        #content .middle{
            background: pink;
            width: 100%;
        }
        #content .right,#content .left{
            background: deeppink;
            width: 200px;
            text-align: center;
        }
        #content .left{
            margin-left:-100%;
        }
        #content .right{
            margin-left:-200px;
        }

<div id="header">
    <h4>header</h4>
</div>
<div id="content">
    <div class="middle">
        <div class="m_inner">
        middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<div id="footer">
    <h4>footer</h4>
</div>

这是一个讲解margin为负值时的应用其中也包含了三列布局（个人觉得挺好）：https://www.cnblogs.com/xiaohuochai/p/5314289.html