css清除浮動的幾種方法

2021-08-15 06:18:39 字數 653 閱讀 3997

當對某個標籤使用浮動的時候,該塊內容就會脫離文件流,其父元素便不再包裹該標籤內容,父元素的高度會變成0,出現高度塌陷的問題。這個時候就要清楚浮動。

今天就來介紹一下css清除浮動的幾種方法。

1. 在文件最後麵新加乙個空的div,如下

style="clear:both">

div>

但是如果使用這種方法,新增了無意義的標籤,違背了結構和表現分離的web結構精髓。後期難以維護。

2. 給浮動的元素新增overflow:auto/hidden

當給浮動的元素新增overflow:auto/hidden時,浮動的元素又會回到文件流,將容器撐起來。

3.讓父元素也浮動

如果說父元素也需要清楚浮動,那就要讓父元素的父元素也要浮動…..那整個頁面都建立在浮動的基礎上。

4.新增乙個.clearfix,使用偽元素

.clearfix

:after,

.clearfix

:before

.clearfix

:after

.clearfix

css清除浮動的幾種方法

我一直以為產生浮動要我們給元素設定float,例如這裡提到的 今天我發現如果父盒子高度不定,子元素沒有設定浮動,如果父盒子高度變為0,那麼裡面的子元素會浮動,效果 黃色盒子上移了,很明顯child產生了浮動,效果等同於父盒子高度不定,子元素設定浮動,那麼父盒子高度會變成0,也就是高度坍塌。那麼如何解...

css清除浮動的幾種方法

1,overflow hidden 在父元素上加上overflow hidden,當然這會有一些 比如內部的一些超出父元素的部分就會被截斷,滾動條也會不見。所以謹慎使用。2,clear both 在浮動的元素下方加乙個div 3,利用偽元素clearfix,這是比較常見和有效的方法,它的本質就是建構...

css清除浮動的幾種方法 清除浮動的方法有哪些?

為什麼使用浮動?浮動是一種常見的布局方式,當兩個或者多個塊級元素 塊級元素的特點是在文件中獨佔一行 需要並列為一行的時候,我們就需要加浮動 擴充套件知識,使塊級元素並列在一行的方式有很多種,比如使用display inline block,但是display inline block轉換出來的元素,...