两列布局

很多网站都使用了两列布局，就是左边固定，右边自适应的布局。两列布局有多种方法，现在来列举一下

第一种：margin + float / margin + absolute

将左边设置 float 或者 absolute ，使其脱离文档流，右边使用margin-left设置左右间隔，大小一般为＞= 左边的宽度，因为是块级元素，所以右边可以充满剩余的屏幕，这样就实现了左边固定，右边自适应的效果。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>twoList layout</title>
 6     <style type="text/css">
 7         .left{
 8           /*float:left;*/
 9           position:absolute;
10           width:200px;
11           height:30px;
12           background-color:red;
13         }
14         .right{
15           height:30px;
16           background-color:blue;
17           margin-left:220px;
18         }
19     </style>
20 </head>
21 <body>
22    <div class="left"></div>
23    <div class="right"></div>
24 </body>
25 </html>

效果如下：

第二种：float + margin +calc()

　　　　关于calc(),可参考：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

将左右都设置向左浮动，左边使用margin-right来设置左右间隔，右边的宽度设置为calc(100% - (left-width + margin-right))

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>twoList layout</title>
 6     <style type="text/css">
 7         .left{
 8           float:left;
 9           width:200px;
10           height:30px;
11           background-color:red;
12           margin-right:20px;
13         }
14         .right{
15           float:left;
16           height:30px;
17           background-color:blue;
18           width:calc(100% - 220px);
19         }
20     </style>
21 </head>
22 <body>
23    <div class="left"></div>
24    <div class="right"></div>
25 </body>
26 </html>

第三种：float + overflow + margin

左边设置float，右边清除浮动就可以显示两列布局了, 使用margin来设置左右间隔，可以在左边设置margin-right来设置左右间隔，也可以在右边设置margin-left来设置左右间隔，值得注意的是若是右边使用margin-left来设置间隔时，需要算上左边的宽度

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>twoList layout</title>
 6     <style type="text/css">
 7         .left{
 8           float:left;
 9           width:200px;
10           height:30px;
11           background-color:red;
12           /*margin-right:20px;*/
13         }
14         .right{
15           height:30px;
16           background-color:yellow;
17           overflow:hidden;
18           margin-left:220px;
19         }
20     </style>
21 </head>
22 <body>
23    <div class="left"></div>
24    <div class="right"></div>
25 </body>
26 </html>