float失效的情况

最新推荐文章于 2024-03-07 18:08:53 发布

weixin_30515513

最新推荐文章于 2024-03-07 18:08:53 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/youhong/p/6663536.html

前言：在最近的笔试中，两次碰到类似的问题，什么情况下float会失效？我目前知道的有2种：

1）display：none；

2）position：absolute、fixed。

（1）display：none

设置成display：none了之后，float失效这一点自然不用说。因为此时元素已经不在dom树里了，float当然起不了作用。

（2）position：absolute、fixed。

先看看没有设置position：absolute/fixed时的表现：

<div id="wrap">
    <div id="div1">浮动div</div>
    <div id="div2">参考div</div>
</div>

#wrap{
     width:300px;
     height:300px;
     border:1px solid black;
     position: relative;
     margin: 0 auto;
 }
 #div1{
     width:100px;
     height:100px;
     background: red;
     float:left;

 }
 #div2{
     width:100px;
     height:100px;
     background:blue;
     float:left;
 }

现在，为红色div1设置position：absolute/fixed：

#div1{
     width:100px;
     height:100px;
     background: red;
     float:left;
     position: fixed;
     /*或者position: absolute;*/
     top:20px;
     left:20px;
 }