圣杯布局和双飞翼布局实现的都是两边侧栏宽度固定，中间宽度自适应，效果如下：

圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念，在国内由淘宝UED的工程师传播开来

布局要求：1.三列布局，中间宽度自适应，两边定宽

2.中间栏要在浏览器中优先渲染

3.允许任意列的高度最高

4.用最简单的CSS、最少的HACK语句

双飞翼布局是经淘宝UED工程师针对圣杯布局改良后得出的

去掉相对布局，只需要浮动和负边距

具体代码如下

圣杯布局：

        
     
     
    
      
header
     
     
     

     
        
      
middle
    
     
    
     
        
      
left
    
     
    
     
        
      
right
    
     
     
     
    
      
footer
     

双飞翼布局：

        
         
     
     
    
      
header
     
     
     
    
      
        
       
        
        
middle
        
       
    
      
    
      
        
       
left
    
      
    
      
        
       
right
    
      
     
     
     
    
      
footer
     

圣杯布局和双飞翼布局相同点：

1、实现的都是三栏式布局，其中，中间栏放到最前面，保证优先渲染。

2、实现方式都是进行左浮动。

区别：

1、圣杯布局在浮动的基础上添加相对定位，配合left和right属性，效果上三栏是单独分开的；双飞翼布局在中间盒子里面又嵌套了一个div块，内容写在里面的div块里，并配合设置margin-left、margin-right，中间栏的middle块设置宽度为100%，效果表现为左右两栏显示在中间栏的上面，中间栏的内容通过margin-left、margin-right显示在中间。