圣杯布局与双飞翼布局

技术总结：

1. 使用float布局
2. 两侧使用margin负值，以便和中间内容横向重叠
3. 防止中间内容被两侧覆盖，分别用padding 和 margin

圣杯布局比较复杂，使用到position: relative

圣杯布局

HTML

<div id="head"> head </div>
    <div id="container" class="clearfix">
        <div id="main" class="column">main </div>
        <div id="left" class="column"> left 220px </div>
        <div id="right" class="column"> right 200px </div>
    </div>
<div id="footer"> footer </div>

CSS

       body {
            min-width: 800px;
        }

        #container {
            /* 3. 防止中间内容被两侧覆盖 */
            padding: 0 300px 0 200px;
        }

        .column {
            /* 1.关键点，使用float布局 */
            float: left;
            text-align: center;
            min-height: 200px;
        }

        #left {
            width: 200px;
            background-color: red;

            /* 2. 知识点： 
            margin-top margin-left 为负值的时候 自己向上 向左 移动
            margin-bottom margin-right 为负值的时候 自己没有影响，后面的元素向上向右移动
            */
            margin-left: -100%;

            /* 与双飞翼布局不同之处 */
            position: relative;
            left: -200px;
        }

        #main {
            background-color: blue;
            width: 100%;
        }

        #right {
            width: 300px;
            background-color: #99f;
            margin-right: -300px;/* 2. 知识点 */
        }

        #footer,
        #header {
            text-align: center;
            background-color: #f9f;
        }


        /* 清除浮动 */
        #footer {
            clear: both;
        }

        /* 手动写清除浮动 */
        /* .clearfix:after {
            content: '';
            display: table;
            clear: both;
        } */

源码

双飞翼布局

HTML

<div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>

CSS

body {
            min-width: 550px;
        }
        .col {
            /*1.使用float*/
            float: left;
        }

        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
            /* 3. 防止中间内容被两侧覆盖，分别用padding 和 margin */
            margin: 0 190px 0 190px;
        }

        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            /* 2. 两侧使用margin负值，以便和中间内容横向重叠 */
            margin-left: -100%;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            /* 2. 两侧使用margin负值，以便和中间内容横向重叠 */
            margin-left: -190px;
        }

源码