<span id="35v3v"><th id="35v3v"></th></span>
<address id="35v3v"></address>

    <address id="35v3v"></address>
      <address id="35v3v"><listing id="35v3v"><meter id="35v3v"></meter></listing></address>
        <listing id="35v3v"><listing id="35v3v"></listing></listing>

        <listing id="35v3v"><listing id="35v3v"><menuitem id="35v3v"></menuitem></listing></listing>

        <noframes id="35v3v"><noframes id="35v3v">
        當前位置: 首頁 / 技術分享 / 正文
        成事不足敗事有余的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號

        黑人100部Av解禁片
        <span id="35v3v"><th id="35v3v"></th></span>
        <address id="35v3v"></address>

          <address id="35v3v"></address>
            <address id="35v3v"><listing id="35v3v"><meter id="35v3v"></meter></listing></address>
              <listing id="35v3v"><listing id="35v3v"></listing></listing>

              <listing id="35v3v"><listing id="35v3v"><menuitem id="35v3v"></menuitem></listing></listing>

              <noframes id="35v3v"><noframes id="35v3v">