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

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

圣杯布局:

浮动：搭建完整的布局框架
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%;