圣杯布局和双飞翼布局的比较

1、圣杯布局

    
    
    


header

    
middle
    

        left

        left

        left

        left

        left

        left

    
    
right

footer

2、双飞翼布局

    
    
    


header

    

        
middle
    
    

        
        
        
        
        
        
        
        
        
        
        
        
    
    
right

footer

3、异同

相同：

（1）都是将主列放在文档流的最前面，使主列优先加载

（2）两种布局都是让三列浮动，在通过调节负外边距形成三列布局

不同：

中间位置的处理：

       圣杯是利用父容器左右内边距+定位；

      双飞翼将主列中嵌套div，然后利用

    #middle-inner{
                    margin-left: 200px;
                    margin-right: 200px;
                }