当前位置: 首页 / 技术分享 / 正文
成事不足败事有余的clear

2022-12-02

   神仙 元素 姐姐

  众所周知,clear属性是用来清除浮动的副作用使用的,那么这个c属性也只有块级元素才有效的,而在万能清除法中,::after伪对象选择器中的content的属性值,默认都是内联元素,所以需要在做清除浮动操作的时候,添加display:block;的原因。

  .clear::after{

  content:"";

  display:block;

  clear:both;

  height:0;

  overflow:hidden;

  visibility:hidden;

  }

  然而,利用伪对象给下方元素添加使用的时候,也会有产生一些意想不到的问题:

  <div style="clear:both;"></div>

  我们来看一下下方在这个案例,如果我们在右侧自适应内容里面使用了类似这样的样式,则可能会发生右边的内容跑到图片下边的情况。

  HTML代码如下:

<body>
    <div class="wrap">
        <img src="./img/liuyifei.jpeg">
        <div class="person">
            神仙姐姐1,神仙姐姐2
            <div class="clear"></div>
            神仙姐姐3,神仙姐姐4,神仙姐姐5,神仙姐姐6,神仙姐姐7,神仙姐姐8
        </div>
    </div>
</body>

  CSS代码如下:

<style>
    .wrap {
        border: 1px solid #444;
        overflow: hidden;
    }
    .wrap>img {
        width: 60px;
        height: 64px;
        float: left;
    }
    .person {
        margin-left: 70px;
    }
    .clear {
        clear: both;
    }
</style>

  页面效果如下:

图片18

  上图中的文字就是添加了clear : both;这个属性导致自适应布局错位。原因就是由于clear: both的作用本质是让自己不和float元素在一行显示,并不是真正意义上的清除浮动,因此float元素一些不好的特性依然存在,于是,会有以下类似的现象。现象1.如果clear:both 元素前面的元素就是float元素,则margin-top负值即使设成-9999px,也不见任何效果。现象2.clear:both 后面的元素依旧可能会发生文字环绕的现象。举个例子,如下 HTML和 CSS:

  HTML代码:

<div class="wrap clear">
     <img src="./img/liuyifei.jpeg">
     这为神仙姐姐刘亦菲,好美好漂亮~这为神仙姐姐刘亦菲,好美好漂亮~这为神仙姐姐刘亦菲,好美好漂亮~
</div>
<div class="box">虽然世间美的事物那么多,心灵的美才是最美的。</div>

  CSS代码:

  .clear::after {

  content: "";

  display: block;

  clear: both;

  height: 0;

  overflow: hidden;

  visibility: hidden;

  }

  .wrap{

  border: 1px solid #000;

  }

  .wrap img{

  width: 60px;

  height: 64px;

  float: left;

  }

  .box{

  margin-top: -2px;

  }

  页面效果如下:

图片19

  根据上面的效果显示,虽然给wrap这个盒子添加了万能清除法,但是依然没能阻止浮动对后面元素的影响,所以错位效果就发生了,如图2所示。所以,clear: both只能在一定程度上消除浮动的影响,要想完美地去除浮动元素的影响,还需要使用其他CSS声明。比如给wrap这个父元素添加overflow:hidden;或者display:inline-block;等属性来解决,底层原理主要涉及到BFC特性,请听下节讲解。(此文案例有借鉴张鑫旭《css世界》一书,特此鸣谢)

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
在线咨询
试听
入学教程
立即报名

Copyright 2011-2023 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号