三栏布局实例（自由浮动+圣杯+双飞翼）

话不多说，直接上源码，源码内有解析

aa.JPG

    
    
    



三栏布局之自由浮动
    
左侧
    
右侧
    
        
自由浮动三栏方案主要关键点
        
1、左右侧边浮动，中间正常流
        
2、左侧左浮动，右侧右浮动
        
3、左右侧元素放前，中间元素放后
        
4、清除浮动引起的高度塌陷，本例采用给中间栏添加:after伪类CSS清除
    



三栏布局之圣杯
    
        
圣杯布局方案主要关键点
        
1、三栏均浮动
        
2、父元素左右内补padding对应左右侧栏宽度
        
3、左右侧元素relatice相对定位，左侧左偏移（left: -XXXpx;），右侧右偏移（left: -XXX0px;）
        
4、左右侧元素负值margin-left，左侧margin-left: -100%(使得元素上移到上一行的行首)，右侧margin-left: -自身宽度
        
5、中间元素放前，左右侧元素放后
        
6、清除浮动引起的高度塌陷，本例采用给父元素添加overflow:hidden类CSS清除
    
    
左侧
    
右侧


三栏布局之双飞翼
    
        
            
双飞翼布局方案主要关键点
            
1、三栏均浮动
            
2、中间栏需额外添加一个子元素
            
3、中间栏width:100%，其子元素的左右margin对应左右侧栏宽度
            
4、左右侧元素负值margin-left，左侧margin-left: -100%(使得元素上移到上一行的行首)，右侧margin-left: -自身宽度
            
5、中间元素放前，左右侧元素放后
            
6、清除浮动引起的高度塌陷，本例采用给父元素添加overflow:hidden类CSS清除
        
    
    
左侧
    
右侧


三栏布局之百分比
    
左侧33.33%
    
中间33.33%
    
右侧33.33%