zoukankan      html  css  js  c++  java
  • float失效的情况

    前言:在最近的笔试中,两次碰到类似的问题,什么情况下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{
         300px;
         height:300px;
         border:1px solid black;
         position: relative;
         margin: 0 auto;
     }
     #div1{
         100px;
         height:100px;
         background: red;
         float:left;
    
     }
     #div2{
         100px;
         height:100px;
         background:blue;
         float:left;
     }

    image

    现在,为红色div1设置position:absolute/fixed:

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

    image                      image

                   position:absolute                                                         position:fixed

    以上两种,无论是fixed(相对窗口定位)或者absolute(相对最近的position属性不为static的祖先元素),都使得红色div的float失效,于是蓝色div直接浮动到边界的左上角。

  • 相关阅读:
    lambda表达式
    netstat
    【makfile | 资源】网址链接
    【makefile】 $@ $^ %< 的使用

    【顺序容器 || 09】
    标准IO库
    我使出这“三板斧”(分段锁、哈希锁、弱引用锁)灭霸跑了......
    JAVA 线上故障排查完整套路,从 CPU、磁盘、内存、网络、GC 一条龙!
    一条 SQL 引发的事故,同事直接被开除!
  • 原文地址:https://www.cnblogs.com/youhong/p/6663536.html
Copyright © 2011-2022 走看看