清除浮動的幾個方法

要解答這個問題，我們得先說說css中的定位機制：普通流，浮動，絕對定位（其中"position:fixed" 是 "position:absolute" 的乙個子類）。

1）普通流：很多人或者文章稱之為文件流或者普通文件流，其實標準裡根本就沒有這個詞。如果把文件流直譯為英文就是 document flow ，但標準裡只有另乙個詞，叫做普通流（normal flow)，或者稱之為常規流。但似乎大家更習慣文件流的稱呼，因為很多中文翻　　譯的書就是這麼來的。比如《css mastery》，英文原書中至始至終都只有普通流 normal flow（普通流）這一詞，從來沒出現過document flow （文件流）

2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另乙個浮動框的邊緣。浮動框不屬於文件中的普通流，當乙個元素浮動之後，不會影響到塊級框的布局而只會影響內聯框（通常是文字）的排列，文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是只能左右浮動。

正是因為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

初始**：

html：

css：

.footer .bigger .smaller .smaller1

圖為原始介面

我們會發現class名為bigger的盒子沒有高度，這是因為small和small1盒子浮動後，從正常流中刪除了這兩個盒子，父盒子內沒有元素，因此高度為0

優點：簡單易懂，易於上手

通過在標籤末尾加乙個空標籤如

或者即可

更改後**：

.footer .bigger .smaller .smaller1 .clear

更改後的介面：

如果清除了浮動，父盒子會自動檢測子盒子高度，以最高高度為父盒子高度

2、overflow元素清除浮動（overflow 屬性規定當內容溢位元素框時發生的事情。）

overflow有以下幾個元素：

值

描述visible

預設值。內容不會被修剪，會呈現在元素框之外。

hidden

內容會被修剪，並且其餘內容是不可見的。

scroll

內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值

優點：不存在結構和語義化問題，**量極少

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；04年popo就發現overflow：hidden 會導致

中建失效，這是作為乙個多標籤瀏覽控所不能接受的。所以還是不要使用了

方法：在浮動盒子的父元素中增加：overflow：hidden；即可

**：html

css：

.footer .bigger .smaller .smaller1

使用者介面：

得到同樣的效果

3、after清除浮動

需要注意的是 :after是偽元素，不是偽類（某些css手冊裡面稱之為「偽物件」），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。

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

html：

css：

.clearfix:after .clearfix .footer .bigger .smaller .smaller1

優點：結構和語義化完全正確,**量居中

缺點：復用方式不當會造成**量增加

4、before after清除浮動

html

css

.clearfix:before,.clearfix:after .clearfix:after .clearfix:after .footer .bigger .smaller .smaller1

清除浮動的幾個方法

清除浮動方法

清除浮動方法及清除浮動原因

清除浮動的方法

清除浮動的幾個方法

清除浮動方法

清除浮動方法及清除浮動原因

清除浮動的方法

相關推薦