圣杯布局(浮动实现)

圣杯布局是一种很常见的css布局。他要求：

1、上部和下部各自占领屏幕所有宽度。

2、上下部之间的部分是一个三栏布局。

3、三栏布局两侧宽度不变，中间部分自动填充整个区域。

4、中间部分的高度是三栏中最高的区域的高度。

 

浮动实现

    
    
    
    
    


    

    

        
1
        
2
        
3
    
    

(1)填充三栏

这一步骤，首先给底部区域清除浮动，防止跟随上边的区域一起浮动。
另外：把中，左，右三个区域设置成度浮动。给左右两块区域固定的宽度，中间部分的宽度设置成100%。

这样实现下来，因为浮动的关系，[middle]会占据[container]的所有部分，而左右两块区域都会被挤到下面，但是，由于第一步设置了内边距的关系，[container]的左右各剩余了一块区域，且宽度与左右区域相同。

(2)移动左侧区域

接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。

先移动左边，新加一个样式 margin-left:-100%。这样一来，因为浮动关系，就把左边块上移到了[middle]左侧，与其交织在一起，而右侧栏就自动往左移动。然后再给左侧栏一个偏移量，偏移量恰好是其宽度，这一步要给[container]的position设成relative

(3)移动右边

同上一步的原理一样，把右侧区域也给弄上去，设置负外边距和本身宽度相同就行了。