圣杯布局和双飞翼布局的几点区别：

1. 圣杯布局的center，left和right是写在一个共同的父元素中的，双飞翼的左中右是分开写的
2. 圣杯布局要使用position定位。

 

1. 圣杯布局：center的width设置100%，此时，left和right被挤到了下一行，设置left的margin-left为-100%，相当于相对left的border-left向左移动100%的父元素单位，因为突破了紧挨浮动元素的下边缘，所以left向上移动，然后利用position将left的位置放置在左边。设置left的margin-right为-150px，设置的右边缘线突破了center元素下边缘的限制，因此向上移动至最右边。

     
      header
     
    
     
        
      
        
      
        
      
     
 
     
      footer
     

body{            min-width: 550px;        }        #header,#footer{            height: 50px;            background-color: aqua;            text-align: center;        }        #container {            padding-left: 200px;            padding-right: 150px;            height: 100px;        }        #container .colomu{            float: left;        }        #center{            /* left被挤到了下一行 */            width: 100%;            background-color: blueviolet;            height: 100px;        }        #left{            /* margin的百分比是相对于父元素说的，margin-left=-100%相当于距离conter元素的右边框200px */            width: 200px;            height: 100px;            margin-left: -100%;            background-color: aquamarine;            position: relative;            right: 200px;        }        #right{            width: 150px;            height: 100px;            background-color: aquamarine;            margin-right: -150px;        }        #footer{            clear: both;        }

               2.双飞翼布局： 双飞翼布局不再使用position来定位left的位置，直接使用margin-left： -100%

     
      header
     
    
     
        
      
       center
      
    
     
    
     
      left
     
    
     
      right
     
    
     
      footer
     

body {            min-width: 500px;        }        div {            height: 100px;        }        #header,        #footer {            background-color: aquamarine;        }        #container {            width: 100%;        }        .column {            float: left;        }        #center {            margin-left: 200px;            margin-right: 150px;            background-color: blueviolet;        }        #left {            width: 200px;            background-color: aqua;            margin-left: -100%;        }        #right {            width: 150px;            background-color: aqua;            margin-left: -150px;        }        #footer {            clear: both;        }