几种css自适应布局方式

1.float+margin（自适应的那个元素），适应横向布局

2.float+绝对定位（自适应的那个元素），适应横向布局

3.绝对定位+绝对定位（自适应的那个元素），适应横向布局，竖向布局

4. 中间那个先用box包裹，box和左右采用float，然后left用margin-left：-100%；right用margin-left：-200px；

 

 

5.圣杯布局和双飞翼布局

区别：圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染

（1）父元素包含三个元素
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染

其实双飞翼布局多了一个box包裹

1.圣杯布局

    
    
    



    
head
    

        

        

        

    

    
foot

2.双飞翼布局

    
    
    



    
head
    

        

            

            
        
        

        

    

    
foot