标签：bsp style lis css ack 清除 float 清除浮动 结果
以前我觉得position:absolute;是可以脱离文档流的，float:left;也可以脱离文档流，就觉得二者是一样的，感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题，结果证明我错了。。。下边是一个demo.
1 <!DOCTYPE html> 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> 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>
标签：bsp style lis css ack 清除 float 清除浮动 结果
原文地址：http://www.cnblogs.com/gaoxuerong123/p/7152516.html
