今天给大家介绍经典三列布局和实现原理：

• 通过浮动（float）进行实现，如果对float不是很清楚可以去看看我上篇介绍的；
• 通过绝对定位布局；
• 通过float加margin的负值进行组合实现。

 对三种情况分析：

1. 第一种通过浮动（float）布局，特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center)，不能像正常那种思维去定义结构（container ->left-center-right）；

*{margin: 0;padding: 0;} html, body{height: 100%;}         .container, .left, .right, .center{height: 100%;} .left{float: left;width: 200px;background-color: #f60;} .right{float: right;width: 200px;background-color: #e30;} .center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}

     
        
      
        
      
        
      
        
      
        
      
                  float布局。        
      
    
     

2. 第二种在定义的时候必须设置最外层容器position: relative，在定义结构的时候左右合两边都设为绝对定位，且必须设置居中元素的左右边距marign（container ->left-center-right）；

*{margin: 0;padding: 0;} html, body{height: 100%;}      .container, .left, .right, .center{height: 100%;}.container{position: relative;}.left, .right{top: 0;position: absolute;width: 200px;}.left{left: 0;background-color: #f60;}.right{right: 0;background-color: #e30;}.center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}

     
        
      
        
      
        
      
                   绝对与相对进行组合布局 最外层容器必须设置  position: relative。        
      
        
      
        
      
    
     

　　

3.  最后一种有一点复杂，利用margin负值加float的实现，大概讲讲他负值的作用，左边上边边距负值会向左和上偏移，右边下边边距负值会导致紧跟着后面元素与其重叠。

*{margin: 0;padding: 0;} html, body{height: 100%;}        .container, .left, .right, .main, .main-body{height: 100%;}.left, .right{width: 200px;background-color: #f60;float: left;}.left{margin-left: -100%;}.right{background-color: #e30;margin-left: -200px;}.main{float: left;width: 100%;}.main-body{margin: 0 200px;background-color: rgb(250,250,154);}

     
        
      
            
       
                        float浮动加margin负值组合布局。