首頁  >  文章  >  web前端  >  css父類清除浮動的原因詳解

css父類清除浮動的原因詳解

黄舟
黄舟原創
2017-10-25 10:06:292012瀏覽

浮動因素在靜態網頁製作中經常被應用到,例如要讓區塊級元素不獨佔一行,常常應用設定float的方式來實現。但是應用的時候會發現,設定了子類別浮動後,未給父類別清除浮動,這樣就會造成一下問題:

        1.浮動的元素會相對於父容器或是前面已經定位的元素進行浮動,浮動的元素脫離文檔流,也就是不再佔有原有的位置,會影響後面的元素或是父容器

        2.父容器正常情況下會自動擴高,但是子元素加了浮動後位置不保留,父容器就感覺它不存在了,所以不會擴高。

所以,在寫靜態網頁時,一定要注意浮動的清除問題,一段清除浮動程式碼可以方便呼叫:   

 .clearFloat:after{
                content:' ';
                display:block;
                height:0;
                visibility:hidden;
}
          .clearFloat{
                zoom:1;
}

以上是css父類清除浮動的原因詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn