css清除浮動的幾種方法

2021-08-09 13:17:33 字數 1185 閱讀 3510

我一直以為產生浮動要我們給元素設定float,例如這裡提到的:

今天我發現如果父盒子高度不定,子元素沒有設定浮動,如果父盒子高度變為0,那麼裡面的子元素會浮動,

**:效果:

黃色盒子上移了,很明顯child產生了浮動,效果等同於父盒子高度不定,子元素設定浮動,那麼父盒子高度會變成0,也就是高度坍塌。

那麼如何解決?

這裡的解決方法是針對父盒子高度不定,子盒子設定浮動。文章一開始提到的其實很少見,我只是通過這裡聯想到,畢竟是父元素盒子變成0子盒子才浮動,不算真的浮動。

浮動對頁面的影響:

如果乙個父盒子中有乙個子盒子,並且父盒子沒有設定高,子盒子在父盒子中進行了浮動,那麼將來父盒子的高度為0.由於父盒子的高度為0,

下面的元素會自動補位,所以這個時候要進行浮動的清除。

關於清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.ovh

先找到浮動盒子的父元素,再在父元素中新增乙個屬性:overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

注意:一般情況下也不會使用這種方式,因為overflow:hidden有乙個特點,離開了這個元素所在的區域以後會被隱藏(overflow:hidden會將超出的部分隱藏起來). 為什麼它可以清除浮動呢?因為overflow:hidden會產生bfc,而bfc是可以包括浮動元素的。

方式二:使用額外標籤法

.clear

在浮動的盒子之下再放乙個標籤,在這個標籤中使用clear:both,來清除浮動對頁面的影響.

a.內部標籤:會將這個浮動盒子的父盒子高度重新撐開.

b.外部標籤:會將這個浮動盒子的影響清除,但是不會撐開父盒子.

注意:一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤,造成結構的混亂.

方法三:使用偽元素來清除浮動(after意思:後來,以後),clearfix是父盒子

.clearfix:after

.clearfix

總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動並且保留超出部分時做不到,第二種方法會增加許多不必要的標籤,

所以我們盡量使用第三種方法來清除浮動,其實第三種和第二種原來差不多,只是不會新增無用的html元素。

css清除浮動的幾種方法

當對某個標籤使用浮動的時候,該塊內容就會脫離文件流,其父元素便不再包裹該標籤內容,父元素的高度會變成0,出現高度塌陷的問題。這個時候就要清楚浮動。今天就來介紹一下css清除浮動的幾種方法。1.在文件最後麵新加乙個空的div,如下 style clear both div 但是如果使用這種方法,新增了...

css清除浮動的幾種方法

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

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

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