當前位置: 首頁 / 技術分享 / 正文
成事不足敗事有余的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元素一些不好的特性依然存在,于是,會有以下類似的現象?,F象1.如果clear:both 元素前面的元素就是float元素,則margin-top負值即使設成-9999px,也不見任何效果?,F象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號

美女裸体黄网站18禁免费_美女裸体黄网站啪啪18禁_美女裸体黄污18禁网站免费下载