清除浮動的幾種方法

2021-07-02 22:18:37 字數 526 閱讀 5356

1.浮動元素下加空div

為了統一樣式,我們新建乙個樣式選擇器class命名為「.clear」,並且對應選擇器樣式為「clear:both」,然後我們在父級「

」結束前加此div引入class="clear"

樣式。這樣即可清除浮動。

這個class

清除float產生浮動,可以不用對父級設定高度 也無需技術父級高度,方便適用,但會多加html標籤。

2.父級div定義 overflow:hidden

對父級選擇器加overflow:hidden樣式,可以清除父級內使用float產生浮動。優點是可以很少**即可解決浮動產生。

為什麼加入overflow:hidden即可清除浮動呢?那是因為overflow:hidden屬性相當於是讓父級緊貼內容,這樣即可緊貼其物件內內容(包括使用float的div盒子),從而實現了清除浮動。overflow:hidden清除浮動方法

推薦使用。

3.在浮動元素下加

4.給浮動元素父級加

其他方法不相容ie6/ie7故不推薦。

清除浮動的幾種方法

當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。浮動帶來的影響 1,父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元...

清除浮動的幾種方法

style float left 為了解決container容器高度塌陷問題,我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤,然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...

清除浮動的幾種方法

當我們使用float後,發現父級元素沒有被撐開,通常情況下需要清除浮動,以下介紹三種清除浮動的方法 1.使用overflow hidden將元素變成bfc,即可清除內部浮動 box child style class box class child div class child div div b...