清除浮動的幾種方法

01-30

這是飢人谷學員的文章，原載於 @xinx1n

為什麼會有 Floats

　　最初，引入 float 屬性是為了能讓 web 開發人員實現簡單的布局，包括在一列文本中浮動的圖像，文字環繞在它的左邊或右邊。但大家很快意識到，它可以浮動任何東西，而不僅僅是圖像，所以浮動的使用範圍擴大了。

　　當我們在網頁各處使用 float 的時候，也由此引發的一些副作用，如：父元素塌陷、元素重疊，清除浮動也就是清除這些副作用。

當一個元素被添加float:right等屬性的時候發生了什麼？

1. float 屬性可以使一個元素脫離正常的文檔流（normal flow），然後被安放到它所在容器的的左端或者右端，並且其他的文本和行內元素環繞它。

2. float 使用了塊狀布局，所以元素的 display 會被改變，改變前後如下：

而第一點正是其副作用的來源，normal flow 通俗來說就是瀏覽器默認擺放 box 的標準，有如下特點：

而 float 元素脫離了 normal flow 就相當於進入了一個平行空間，不再與其後邊及父級塊級元素髮生反應，這一特性使得 float 元素無法撐起父元素的高度，導致父元素塌陷。

第一點中還提到其他的文本和行內元素環繞 float元素，但是 float 後的塊級元素會與其發生重疊。

為了解決 float 屬性引發的問題，我們在 CSS 中引入了clear:left|right|both屬性，其作用分別是在元素的左側|右側|兩側不允許存在 float 元素，我們可以用他來清除其副作用。

利用 clear 屬性我們有兩種方法來清除浮動。

其效果如下：

未添加

添加後

有時我們會遇到上圖的情況，float 元素後沒有其他元素了，這時該怎麼辦？固然我們可以在其後添加一個空div，然後像1中一樣解決問題，但這種方式並不優雅，偽元素這時候就派上用場了，我們可以寫一個.clearfix 工具樣式，當給需要清除浮動時，就為其加上這個類。效果如下：

將父元素的 owerflow 屬性修改為 owerflow:auto|hidden，效果如下：

除了以上方案外，還有一些其他的方案，比如將父元素的 display 樣式屬性改為display:table或者position:fixed，但是這些方案容易帶來更大的副作用，得不償失，所以實踐中一般都會使用以上三種方案。

CSS 的細節非常多，幾段文字、幾張圖片遠不能將其描述的很清楚，要了解更多的細節、特性、優劣，需要手動修改代碼來做實驗。

方案 1 代碼

方案 2 代碼

方案 3 代碼