float与absolute脱离文档流的区别

最新推荐文章于 2021-11-04 13:40:43 发布

qq_34574621

最新推荐文章于 2021-11-04 13:40:43 发布

阅读量1.2k

点赞数

文章标签： css html

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

float时：

[html]view plaincopy 
   
 <html>  
     <head>  
         <title></title>  
         <style type="text/css">  
             *{padding: 0;margin: 0}  
             .box1{width:100px;background-color:red;float:left}    
             .box2{width:100px;background-color:gray;float:right}      
             .box3{background-color: aqua;margin: 0 110;}          
         </style>  
     </head>  
     <body>  
         <div class="box1">box1</div>  
         <div class="box2">box2</div>  
         <div class="box3">box3</div>  
     </body>  
 </html>  

显示效果如下：可见，box3的margin是box3边框到浏览器的距离，box3的位置并没有收到float的box1 box2的影响。

当把box3样式改为：.box3{background-color: aqua;}时，可以看到box3中间的文本依然为box1 box2让出了位置。

position:absolute时：

[html]view plaincopy 
   
 <html>  
     <head>  
         <title></title>  
         <style type="text/css">  
             *{padding: 0;margin: 0}  
             .box1{width:100px;background-color:red;position:absolute;left:0;top:0}    
             .box2{width:100px;background-color:gray;position:absolute;right:0;top:0}      
             .box3{background-color: aqua;}        
         </style>  
     </head>  
     <body>  
         <div class="box1">box1</div>  
         <div class="box2">box2</div>  
         <div class="box3">box3</div>  
     </body>  
 </html>  

显示效果：

可以看到，box3中的文本不见了，被box1遮盖了，也可以反映出，box3的定位也是不受到绝对定位的box1 box2的影响，而且box3的文字也没有为box1 box2让出位置。

qq_34574621

关注

0
点赞
踩
1

收藏

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

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。float时：[h
复制链接

扫一扫