position脱离文档流与浮动脱离文档流的区别

Posted 2020-09-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

View Code

觉得添加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>

View Code

以上是关于position脱离文档流与浮动脱离文档流的区别的主要内容，如果未能解决你的问题，请参考以下文章

浮动脱离文档流与定位脱离文档流的比较~

float和position:absolute脱离文本流的区别

脱离文档流是啥意思

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

完全理解float之“不完全脱离文档流”

关于css浮动框是否脱离文档流的分析