三列布局（浮动和负边距）

• 浮动大概思路是将前两个元素分别向左，向右浮动， 然后第三个自然就上来了。

  <div class="a"></div>
  <div class="c"></div>
  <div class="b"></div>
  
  .a{
     float:left;
     width:50px;
     height:70px;
     background:orange;
  }
  .c{
     float:right;
     width:50px;
     height:70px;
     background:blue;
  }
  .b{
     height:70px;
     background:red;
  }

   

• 负边距。也需要用到浮动。

  <div class="wrap">
          <div class="main">cc</div>
  </div>
  <div class="left">vvv</div>
  <div class="right">bbbb</div>
  
  .wrap{
      float:left;
      width:100px;//随屏幕宽度变化    
  }
  
  .main{
      background:red;
      margin-left:aaa;//aaa表示左边元素留出来的宽度。
      margin-right:bbb;//bbb表示给右边元素留出来的的宽度。
  }
  
  .left{
      width:aaa;
      float:left;
      background:green;
      margin-left:-100%;//设为-100%可以上移一行。
  }
  .right{
      float:left;
      width:bbb;
      background:blue;
      margin-left:-bbb;  //设置和自身宽度一样的负边距，刚好把自己移上去。
  }

  神马双飞翼布局就是按着来的。