以前我觉得position:absolute;是可以脱离文档流的，float:left;也可以脱离文档流，就觉得二者是一样的，感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题，结果证明我错了。。。下边是一个demo.
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 ul{
8 width: 200px;
9 }
10 ul li{
11 list-style: none;
12 left: 2px;
13 width: 200px;
14 height: 100px;
15 position: absolute;
16 }
17 .a{background-color: #8EC63F;}
18 .b{background-color: red;}
19 .c{background-color: gray;}
20 </style>
21 </head>
22 <body>
23 <ul class="d">
24 <li class="a">1</li>
25 <li class="b">2</li>
26 <li class="c">3</li>
27 <p style="clear: both;"></p>
28 </ul>
29 </body>
30 </html>
觉得添加clear:both;可以解决ul 高度宽度的问题，结果我大错特错了。。。position:absolute;中已经引起脱离文档流，这个原理和float:left:引起的浮动问题是不一样的，所以不能用清除浮动的方法解决position:absolute;引起的高度塌陷问题。
下边这个是float:left;引起的浮动问题，就可以用清除浮动的方法；
1 <!DOCTYPE html>View Code
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 ul li{
9 list-style: none;
10 left: 2px;
11 width: 200px;
12 height: 100px;
13 float: left;
14 }
15 .a{background-color: #8EC63F;}
16 .b{background-color: red;}
17 .c{background-color: gray;}
18 </style>
19 </head>
20 <body>
21 <ul class="d">
22 <li class="a">1</li>
23 <li class="b">2</li>
24 <li class="c">3</li>
25 <p style="clear: both;"></p>
26 </ul>
27 </body>
28 </html>