很多网站都使用了两列布局，就是左边固定，右边自适应的布局。两列布局有多种方法，现在来列举一下
第一种：margin + float / margin + absolute
将左边设置 float 或者 absolute ，使其脱离文档流，右边使用margin-left设置左右间隔，大小一般为 ＞= 左边的宽度，因为是块级元素，所以右边可以充满剩余的屏幕，这样就实现了左边固定，右边自适应的效果。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>twoList layout</title> <style type="text/css"> .left{ /*float:left;*/ position:absolute; width:200px; height:30px; background-color:red; } .right{ height:30px; background-color:blue; margin-left:220px; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
效果如下：
第二种：float + margin +calc()
将左右都设置向左浮动，左边使用margin-right来设置左右间隔，右边的宽度设置为calc(100% - (left-width + margin-right))
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>twoList layout</title> <style type="text/css"> .left{ float:left; width:200px; height:30px; background-color:red; margin-right:20px; } .right{ float:left; height:30px; background-color:blue; width:calc(100% - 220px); } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
第三种：float + overflow + margin
左边设置float，右边清除浮动就可以显示两列布局了, 使用margin来设置左右间隔，可以在左边设置margin-right来设置左右间隔，也可以在右边设置margin-left来设置左右间隔，值得注意的是若是右边使用margin-left来设置间隔时，需要算上左边的宽度
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>twoList layout</title> <style type="text/css"> .left{ float:left; width:200px; height:30px; background-color:red; /*margin-right:20px;*/ } .right{ height:30px; background-color:yellow; overflow:hidden; margin-left:220px; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>