圣杯布局

三栏布局（两栏布局）：侧栏宽度固定，中间的主内容区域宽度自适应
主要原理，对浮动元素设置 负margin = 自身宽度，会使元素上移。
html代码

    

        
main
        
aside
        
extra
    

CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
    }
    .main{
        width: 100%;
        background-color: #ccc;
        height: 100px;
    }

  设置三个元素浮动，并设置相应元素的负margin后，元素会上移。当然浮动后需要清除浮动，这里不做介绍，详情见BFC博客。
CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
        float: left;
        margin-left: -100%;/*父容器的宽度*/
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
        float: left;
        margin-left: -50px;/*容器自身的宽度*/
    }
    .main{
        width: 100%;/*必须设置，浮动后元素宽度会塌陷*/
        background-color: #ccc;
        height: 100px;
        float: left;
    }

当然，此时仍有一些问题，比如.main被遮盖住了一部分。
以下开始是圣杯布局与双飞翼布局的不同点：

• 1.对容器设置padding

    #content{
            padding: 0 60px;
        }

• 2.对侧栏设置position: relative;并调整位置

    #content{
        padding: 0 60px;
        border: 1px solid black;
    }
    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
        float: left;
        margin-left: -100%;/*父容器的宽度*/
        position: relative;
        left: -60px;
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
        float: left;
        margin-left: -50px;/*容器自身的宽度*/
        position: relative;
        left: 60px;
    }
    .main{
        width: 100%;
        background-color: #ccc;
        height: 100px;
        float: left;
    }