圣杯布局与双飞翼布局

圣杯布局

main
    
left
    
right

分为如下几步：

1. main、left、right：均float:left; 可设置高
2. main: (width: 100%;) 使其撑满整个容器，left和right被挤到第二行
3. left: margin-left: -100%;
   注意： margin-left：-100%，是以父元素的width为依据的；这样left就移动到第一行main的左边位置，并遮挡住了main
4. right: margin-lert: -300px;
   right也移动到了第一行main的右边位置，并遮住了main
   以上4步，双飞翼布局类似，两种布局主要的不同点在于处理父元素的遮挡
5. 给container添加：padding: 0 300px 0 200px;
   这时候的显示如下：

Paste_Image.png

left、main和right均被移动到中间

给left添加： position: relative; left: -200px;
给right添加：position: relative; right: -300px;
大功告成

Paste_Image.png

圣杯布局的y一个缺点是： main的宽度不能小于left的宽度，因为left的margin-left: -100%；100%也就是container的宽度，而container的宽度=main的宽度，当main的宽度小于left的宽度时，-100%移动的距离小于left的宽度，因此无法将left移动到与main排列在同一行

双飞翼布局

代码如下：

    

        
main
    
    
left
    
right

双飞翼布局主要的不同点在于：给main添加了一个包裹层main-wrap，让其width: 100%; 然后对main使用margin，去除left和right对main的遮盖

总结

两者的共同点

两者的不同点