CSS 清除浮動的N種方式

2021-10-06 06:25:23 字數 1319 閱讀 4511

清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0的問題。

舉個例子:

class

="content"

>

class

='incont'

>

div>

div>

.content

.incont

此時元素是這樣的:

如果我們讓其中的子元素浮動,那麼就會變成下面這樣,我們會發現父元素的內容區的高度不見了:

接下來我們要做的就是解決這個問題。

缺點:新增無意義標籤,語義化差,不推薦

通過觸發bfc方式,實現清除浮動:

.content

.content

.content:after

缺點:ie6-7不支援偽元素:after,使用zoom:1觸發haslayout.

下面的寫法更簡潔:

.content:after,.content:before

.content:after

還有其他方法這裡就不再贅述,比如直接給父元素設定高度、讓父元素也浮動、父級元素絕對定位(觸發bfc)、父級元素設定為 inline-block(也是觸發bfc) 等方法。

滿足以下任意一條就可以觸發bfc,而觸發bfc就可以清除浮動:

css清除浮動的種方式

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

css 清除浮動的4種方式

浮動布局和定位布局為css中布局的常用的兩種布局方式,而且相容性會比較好。隨著flex的流行,以後會是主流,新的東西好用,相容不太好。ie10以下不相容flex布局。float布局會脫離文件流,對頁面的布局造成影響,比如造成父級的高度坍塌等問題。清除浮動後,便不會影響文件流。下面介紹一下現在清除浮動...

CSS 清除浮動的五種方式

清除浮動是一件功德無量的事情23333 這裡記錄一下清除浮動的多種方式 首先要明確的是,為什麼要清除浮動?a 影響其他元素定位 父盒子高度為0,子盒子全部浮動 定位,子盒子不會撐開父盒子,下面的元素會到子盒子的下面 b 背景或顏色不能正常顯示 由於浮動產生,如果對父級設定了css背景顏色或css背景...