首頁 > web前端 > css教學 > css要如何清除浮動

css要如何清除浮動

青灯夜游
發布: 2021-10-12 15:02:19
原創
20954 人瀏覽過

css清除浮動的方法:1、浮動程式碼後面新增一個設定了「clear:both」樣式的空div標籤。 2.為父級元素新增一個設定「clear:both;」樣式的after偽元素。 3.給父元素設定「overflow: auto」樣式。

css要如何清除浮動

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在我們寫程式碼的時候,有時因為使用了float浮動元素而導致頁面中某些元素不能正確的顯示。

但使用float浮動元素後,會有一些不好的影響:

(1)由於浮動元素脫離了文檔流,所以父元素的高度無法被撐開,影響了與父元素同級的元素
(2)與浮動元素同級的非浮動元素會跟隨其後,因為浮動元素脫離文檔流不佔據原來的位置
(3)如果該浮動元素不是第一個浮動元素,則該元素之前的元素也需要浮動,否則容易影響頁面的結構顯示

這個時候就需要清除浮動了,下面介紹一些css清除浮動的方法。

(1)使用clear:both清除浮動

#在程式碼中在放一個空的div標籤,然後給這個標籤設定clear:both來清除浮動對頁面的影響。它的優點是簡單,方便相容性好,但是一般情況下不建議使用該方法,因為會造成結構混亂,不利於後期維護

1

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

登入後複製

(2)利用偽元素clearfix來清除浮動

為父級元素添加了一個:after偽元素,透過清除偽元素的浮動,達到撐起父元素高度的目的

1

2

3

4

5

6

.clearfix:after{

    content:"";

    display:block;

    visibility:hidden;

    clear:both;

    }

登入後複製

(3)使用CSS的overflow屬性

當給父元素設定了overflow樣式,不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了,它的本質是建構了一個BFC,使得達到撐起父元素高度的效果

1

2

3

4

5

.box{

border:1px solid #ccc;

background:#eff2f4;

overflow: auto

}

登入後複製

(學習影片分享:css影片教學

以上是css要如何清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板