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

最新推荐文章于 2023-05-02 21:00:00 发布

weixin_30871701

最新推荐文章于 2023-05-02 21:00:00 发布

阅读量103

点赞数

原文链接：http://www.cnblogs.com/gaoxuerong123/p/7152516.html

版权

以前我觉得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

转载于:https://www.cnblogs.com/gaoxuerong123/p/7152516.html

weixin_30871701

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position脱离文档流与浮动脱离文档流的区别

以前我觉得position:absolute;是可以脱离文档流的，float:left;也可以脱离文档流，就觉得二者是一样的，感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题，结果证明我错了。。。下边是一个demo. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 ...
复制链接

扫一扫