首页 > 代码库 > position脱离文档流与浮动脱离文档流的区别
position脱离文档流与浮动脱离文档流的区别
以前我觉得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>
position脱离文档流与浮动脱离文档流的区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。