圣杯布局与双飞翼布局的区别

目的：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

• 圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

• 双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

实现：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

1. 圣杯布局（position+float+padding）

      #left{
            float: left;
            position: relative;
            width: 200px;
            height: 100px;
            margin-left: -100%;
            background-color: red;
            left: -200px;
        }
        #right{
            float: left;
            position: relative;
            width: 200px;
            height: 100px;
            margin-left: -200px;
            background-color: #333333;
            right: -200px;
        }
        #center{
            float: left;
            width: 100%;
            height: 100px;
            background-color: #0086b3;
        }
        #content{
            padding: 0 200px 0 200px;
            height: 100px;
        }

    
middle
    
left
    
right

2.双飞翼布局(float+margin)

        #center{
            float:left;
            width:100%;/*左栏上去到第一行*/
            height:100px;
            background:blue;
        }
        #left{
            float:left;
            width:180px;
            height:100px;
            margin-left:-100%;
            background: #f2d67f;
        }
        #right{
            float:left;
            width:200px;
            height:100px;
            margin-left:-200px;
            background: #ff3e31;
        }
       // 给内部div添加margin，把内容放到中间栏，其实整个背景还是100%
        #inside{
            margin:0 200px 0 180px;
            height:100%;
        }

    
middle

left
right

优缺点对比

• 圣杯布局:
  • 优点：不需要添加dom节点
  • 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无限放大时，「圣杯」将会「破碎」掉，当middle部分的宽小于left部分时就会发生布局混乱。
• 双飞翼布局：
  • 优点：不会像圣杯布局那样变形
  • 缺点：多加了一层dom节点

结论

通过对比可看出，双飞翼布局比圣杯布局多创建了一个div，但是不用相对布局了。但是通过代码就可以看出双飞翼更加简洁。

细节解析

margin-left：-100%是什么意思？
意思就是向左移动整个屏幕的距离。
以双飞翼布局为例，将代码中所有的margin属性注释掉，我们会看到以下布局：

image.png

那下面将left 的margin设置为-100%，可以看下是什么效果：

设置之前解析

移动结果