一、圣杯布局和双飞翼布局的目的

• 实现三栏布局，中间一栏最先加载和渲染
• 两侧内容固定，中间内容随着宽度自适应
• 一般用于PC网

二、圣杯布局的实现

技术要点：

1. 设置最小宽度min-width
2. 使用float布局，注意清除浮动
3. 使用margin负值（如果对margin负值不太了解的话，可以看看）
4. 对三栏整体区域设置左右内边距，宽度为left和right的宽度，避免内容重叠
5. 使用定位

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
 9 
10 
58 
59 
60     
this is header
61     

62         
this is center
63         
this is left
64         
this is right
65     
66     
67 
68 

 三、双飞翼布局的实现

技术要点：

1. 设置最小宽度min-width
2. 使用float布局，注意清除浮动
3. 使用margin负值（双飞翼布局不需要使用margin-right负值）
4. 对center设置左右外边距，避免与侧边栏内容重叠

代码如下：

    
    
    
    




    
this is header
    

        

            
this is center
        
        
this is left
        
this is right
    
    

圣杯布局与双飞翼布局效果图如下：

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

1. 圣杯布局使用了margin-right负值，相对来说比较难理解
2. 圣杯布局设置的是内边距padding，避免内容重叠。而双飞翼布局是给center元素添加了一个父盒子，只需要设置center的外边距即可避免与左右侧边栏重叠

五、总结

圣杯布局和双飞翼布局的技术总结：

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