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

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

<div class="a"></div>
<div class="c"></div>
<div class="b"></div>

.a{
   float:left;
   50px;
   height:70px;
   background:orange;
}
.c{
   float:right;
   50px;
   height:70px;
   background:blue;
}
.b{
   height:70px;
   background:red;
}

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

 1 <div class="wrap">
 2         <div class="main">cc</div>
 3 </div>
 4 <div class="left">vvv</div>
 5 <div class="right">bbbb</div>
 6 
 7 .wrap{
 8     float:left;
 9     100px;//随屏幕宽度变化    
10 }
11 
12 .main{
13     background:red;
14     margin-left:aaa;//aaa表示左边元素留出来的宽度。
15     margin-right:bbb;//bbb表示给右边元素留出来的的宽度。
16 }
17 
18 .left{
19     aaa;
20     float:left;
21     background:green;
22     margin-left:-100%;//设为-100%可以上移一行。
23 }
24 .right{
25     float:left;
26     bbb;
27     background:blue;
28     margin-left:-bbb;  //设置和自身宽度一样的负边距，刚好把自己移上去。
29 }

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