清除浮動的方式

現在許多**都是採用浮動的方式來編寫網頁，所以清楚如何清除浮動就顯得尤為重要。下面介紹清除浮動的六種方法。

給第乙個盒子設定高度

標準流的元素會撐起父元素的高度，但是浮動流的元素是不會撐起父元素的高度的。第乙個盒子的元素全部浮動，所以導致第乙個盒子高度為0，也就是說body中第乙個元素為空，這樣第二個盒子就上來成為了body中的第一行元素。當第二個盒子的全部元素都浮動時，由於它們本來是第一行的元素，所以根據浮動元素排列規則，這些元素會排在第一列浮動元素的後邊，所以就會出現下面這種情況：

當設定了第乙個盒子的高度時，第二個盒子就不能成為第一行的元素。如果第乙個盒子高度足夠時，第二個的元素設定浮動後，浮動元素不會排在第乙個盒子浮動元素的後邊。如下圖：

還有一種情況，就是當第乙個盒子高度不夠時，第二個盒子的浮動元素仍然會在第乙個盒子浮動元素的後面，但是不會平行排列，如下圖：

首先，由於第乙個盒子有高度，所以第二個盒子就不能上去成為第一行元素，從而導致了第二個盒子浮動的內容被擠下來。其次，根據浮動元素排列規則可知，當第二個盒子元素浮動時發現前面已經有了浮動的元素，所以會緊跟著前面浮動元素排列。

clear屬性有四個取值：

注意點：設定了clear: both;屬性後margin-top屬性會失效。我們在企業開發中，兩個盒子用到margin屬性的地方很多，所以這個方法也不是很適合。

在兩個盒子之間插入乙個塊級元素，並設定clear: both;屬性。

完成上述操作後，就相當於有三個塊級元素，也就是body中分三行。由於第二行設定了clear屬性，所以第二行的元素就不會隨著上一行元素的浮動而浮動。這時，第三行也就是第二個盒子裡的元素會隨著第二行浮動，但是第二行沒有元素 ，所以第三行元素直接在第二行開頭開始浮動，從而實現浮動清除。如下圖：

注意點：

偽元素選擇器法

有關偽元素選擇器詳見有關部落格。

性質和內牆法一樣，在第乙個盒子裡的最後新增乙個內容為空的塊級元素，並設定clear: both;屬性。**如下：

.box1

::after

效果如下：

這種方法同樣可以給：

六種方式中最常用的一種，只需要給第乙個盒子新增乙個該屬性即可。**如下：

.box1

新增前：

新增後效果：

清除浮動方式

1 當父元素不設定高度時，標準流中內容高度為父元素的高度 2 但是若為浮動流，浮動流的高度不為父元素的高度。為第乙個標籤設定高度。但是這種方式並不常用，所以一般情況下不會使用。使用clear屬性來清除浮動。clear共有四個取值 none 不進行清除 left 讓浮動元素不去尋找前面左浮動的元素 r...

清除浮動的方式

清除浮動的方式常用的有三種 clearfix，clear both，overflow hidden clearfix是萬金油版本 寫法一 clearfix after寫法二 clearfix before,clearfix after clearfix after clearfixclear bot...

清除浮動的方式

首先我們需要明確乙個定義，什麼是浮動？元素使用float屬性之後，會脫離文件流，父級元素因此失去支撐 若父級元素未設定高度 下面的元素會忽略父級元素布局,為了不影響頁面布局效果，我們需要清除浮動。清除浮動的常用方式有以下三種 1.浮動元素的父級元素 parent 2.浮動元素的父級元素後新增偽元素 ...