使用简单的方法使其左侧固定，右侧自适应，并且左侧先出现的布局：
代码
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 </head>
7 <style>
8 *{ margin:0; padding:0}
9 .warpper{ margin:0 auto;background-color:#ccc;}
10 .clear{*zoom:1;}
11 .clear:after{content:"...";height:0;display:block;clear:both;visibility:hidden;}
12 .left{ width:200px; float:left; background-color:#0CF}
13 .ss{margin-left:210px; background-color:#F00;}
14 </style>
15 <body>
16 <div class="warpper clear">
17 <div class="left">
18 12313213213
19 <br>
20 <br>
21 <br>
22 <br>
23 <br>
24 <br>
25 <br>
26 <br>
27 <br>
28 <br>
29 <br>
30 <br>
31 <br>
32 <br>
33 <br>
34 <br>
35 </div>
36 <div class="ss">
37
38 123123
39 12313
40 </div>
41 </div>
42 </body>
43 </html>
今天遇到一个情况就是当左侧列里面出现浮动又要使用clear清楚时候会出现不理想的状况：
如图，代码为：
代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{ margin:0; padding:0}
.warpper{ margin:0 auto;background-color:#ccc;}
.clear{*zoom:1;}
.clear:after{content:"...";height:0;display:block;clear:both;visibility:hidden;}
.left{ width:200px; float:left; background-color:#0CF}
.ss{margin-left:210px; background-color:#F00;}
.ss li{ float:left; width:50px;height:50px;margin-left:10px; background-color:#9C9}
</style>
<body>
<div class="warpper clear">
<div class="left">
12313213213
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="ss">
<ul class="clear">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
123123
12313
</div>
</div>
</body>
</html>
IE6 7正常 标准浏览器都是如图所示：
解决方法为使其UL增加css： .ss ul{ overflow:hidden}
