CSS中清除浮動的方式

2021-09-30 13:45:59 字數 1232 閱讀 4138

什麼是浮動？

使元素脫離文件流（標準流），按照指定方式發生移動，遇到父級邊界或者相鄰的浮動元素就停下來的一種現象。

float:left|right|inherit|initial|none;

下面看乙個例子：

div1


div2


div3
效果圖：

從上面現象，div1、div2、div3因設定了float:left;向左浮動了，但是最外層的div卻沒有被撐開，顯示成了一條線，也就是最外層的div高度塌陷了。那什麼情況一般會出現高度塌陷呢？

一般使父元素沒有設定高度，而子元素都設定了浮動，此時父元素就會發生高度塌陷。

那麼怎樣去解決高度塌陷的問題呢？下面就總結幾種清除浮動的方法。

#box
效果圖：

此方法只適合高度固定的布局。

html:

div1


div2


div3
css:

#box 


.float 


#box1 


#box2 


#box3 


.clear
clear:left | right | both | none | inherit：元素的某個方向上不能有浮動元素 

clear:both：在左右兩側均不允許浮動元素。

#box
html：

div1


div2


div3
css：

.clearfix:after 


.clearfix
此種方法的寫法很固定，一般可以寫在乙個公共的地方。

.clear:after


.clear
對於不同清除浮動的方式，一般具體問題具體解決，以上只是介紹了幾種主流以及相容性比較好的方式。

好文推薦：

css清除浮動的種方式

我們在使用float浮動進行布局的時候知道一般需要給浮動的塊元素加上乙個父級元素，這樣元素浮動時才可以在父元素內部按照我們需要的方式進行布局，但是有乙個問題是如果父元素沒有給定高度的話當內部元素進行浮動之後父元素的高度就會是0，這是因為浮動的元素是處於標準流之外的。若是在一開始給定父元素乙個高度的話...

CSS 清除浮動的幾種方式

原文章 1 用 after 偽類，在父元素最後插入乙個空字串 content 元素設為塊級元素 display block 清除浮動 clear both 可見設為隱藏 高度為 0 2 相容低版本ie瀏覽器 同時設定給父元素設定樣式 其中 clear both 指清除元素兩側的所有浮動，如果該元素前...

css清除浮動的幾種方式

為什麼要清除浮動 清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題。舉個例子 此時元素是這樣的 如果我們讓其中的子元素浮動，那麼就會變成下面這樣，我們會發現父元素的內容區的高度不見了 incont使用after偽元素清除浮動 推薦使用 content content after...