清楚浮動的幾種方法

2021-10-03 21:16:56 字數 1054 閱讀 2960

標準流:盒子會各佔整行位置。子盒子若是標準流,父盒子雖然沒有高度,但是會撐開父盒子高度。  

浮動:盒子浮了起來,不會佔據原來的位置,若父盒子沒有定義高度,則不會撐開父盒子,父盒 子高度為0。(浮動可以讓多個塊級元素在一行顯示,且塊與塊之間沒有空隙,但要注意給父盒子清除浮動,否則父盒子不會被撐開)。

清除浮動的本質是什麼?

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後, 父級就會根據浮動的子盒子自動檢測高度。父級有了高度,就不會影響下面的標準流了。 

1、額外標籤法(給誰清除浮動,就在其後額外新增乙個空白標籤 )

在浮動元素末尾新增乙個空的標籤例如

,或則其他標籤br等亦可。

2、父級新增overflow方法:可以通過觸發bfc的方式,實現清楚浮動效果。

overflow: hidden; 

優點:**簡潔(慎重使用,若該父盒子裡還有position定位會引起麻煩)

缺點:內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。

3、使用after偽元素清除浮動

:after 方式為空元素額外標籤法的公升級版,好處是不用單獨加標籤了

.clearfix:after    

.clearfix /* ie6、7 專有 */

優點: 符合閉合浮動思想 結構語義化正確

缺點: 由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

4、使用雙偽元素清除浮動

.clearfix:before,.clearfix:after 

.clearfix:after

.clearfix

優點:  **更簡潔

缺點:  由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

清楚浮動的幾種方法

清楚浮動的幾種方法 為什麼我們用float left right之後會對其父輩或兄弟元素產生影響 浮動框不在普通的文件流中,它脫離了文件流,所以包圍的內容的不佔據空間。如下面的 1221233 uriiot rrr如何讓包圍的元素在視覺上包圍浮動元素呢?1 在緊靠最後乙個浮動元素之後新增乙個空元素並...

清除浮動的幾種方法

1.浮動元素下加空div 為了統一樣式,我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動,可以不用對父級設定高度 也無需技術父級高...

清除浮動的幾種方法

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