圣杯布局和双飞翼布局的理解和区别，并用代码实现

1、相同点和区别

相同点：

主要解决左右定宽，中间自适应的三栏布局，并且中间栏优先渲染。

具体实现：三栏都设置成左浮动，中间栏100%宽度，左右栏设置具体宽度。

                  中间栏放在文档流前面，让浏览器自上而下优先渲染。

区别：

为了不会造成中间的div的文字被旁边遮挡，

圣杯布局采用的是父级div给 padding-left 和 padding-right 限制，让字不会被左边和右边挡住；

双飞翼布局是采用给中间的div添加一个小div，这个小div使用外边距；

2、圣杯布局

原理：

三栏利用float和负margin 并列，利用父容器设置 padding 给两边侧栏腾空间。

父容器：设置 padding 给两边侧栏腾空间；

中间栏：左浮动；放在文档流前面，使其优先渲染；宽度设置100%；

左栏：左浮动；设置固定宽度；设置相对定位且left值为宽度的负值；margin-left -100%；

右栏：左浮动；设置固定宽度；设置相对定位且left值为宽度的正值；

效果：

 

代码：

        <div id="parents">
            <div id="top">顶部 top</div>
            <div id="main">
              <div id="content">中间 Content</div>
              <div id="left">左边 Left</div>
              <div id="right">右边 Right</div>
            </div>
            <div id="foot">底部 foot</div>
        </div>

* {
    margin: 0;
    padding: 0;
    text-align: center;
}

#parents {
    width: 600px;
    border: 2px solid #000;
    margin: 0 auto;
}

#main {
    padding-left: 100px;
    padding-right: 150px;
    overflow: hidden;
}

#left,
#content,
#right {
    float: left;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#content {
    background: #D6D6D6;
    width: 100%;
}

#left {
    background: #E79F6D;
    width: 100px;
    position: relative;
    left: -100px;
    margin-left: -100%;
}

#right {
    background: #77BBDD;
    width: 150px;
    margin-left: -150px;
    position: relative;
    left: 150px;
}

#top {
    background: #666;
    height: 50px;
    color: #f1f1f1;
}

#foot {
    background: #666;
    clear: both;
    height: 50px;
    color: #f1f1f1;
}

3、双飞翼布局

原理：

三栏利用 float和负margin 并列，在中间栏加一层容器，利用 margain 给两栏腾空间。

父容器：设置最小宽度；

中间栏：加一层容器；设置margin左值为左栏宽度，右值为右栏宽度；放在文档流前面，使其优先渲染；宽度设置100%；

左栏：左浮动；设置固定宽度；margin-left: -100%；

右栏：左浮动；设置固定宽度；margin-left: 宽度负值；

效果：

 代码：

        <div id="parents">
            <div id="top">顶部 top</div>
            <div id="main">
              <div id="content">
                <div class="contain">中间 Content</div>
              </div>
              <div id="left">左边 Left</div>
              <div id="right">右边 Right</div>
            </div>
            <div id="foot">底部 foot</div>
        </div>

* {
    margin: 0;
    padding: 0;
    text-Align: center;
}

#parents {
    width: 600px;
    border: 2px solid #000;
    margin: 0 auto;
}

#main {
    min-width: 250px;
    overflow: hidden;
}

#left,
#content,
#right {
    float: left;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
}

#content {
    background: #D6D6D6;
    width: 100%;
}

#content .contain {
    background: red;
    margin: 0 150px 0 100px;
}

#left {
    background: #E79F6D;
    width: 100px;
    margin-left: -100%;
}

#right {
    background: #77BBDD;   
    width: 150px;
    margin-left: -150px;
}

#top {
    background: #666;
    height: 50px;
    color: #f1f1f1;
}

#foot {
    background: #666;
    clear: both;
    height: 50px;
    color: #f1f1f1;
}

具体可参考：

CSS Tricks
CSS Tricks