清除浮動的幾種常用方法小結

在web的應用中浮動不是什麼好東西，但是在學習生活中，卻不可或缺，今天就清除浮動的方法做個小結。

1）新增額外標籤

在浮動元素末尾新增乙個空的標籤例如

，其他標籤br等亦可。

<

div 
class
="warp"
id="float"
>
<
h2>1）新增額外標籤
h2>
<
div 
class
="main left"
>.main
div>
<
div 
class
="side left"
>.side
div>
<
div 
style
="clear:both;"
>
div>
div>

優點：通俗易懂，容易掌握

缺點：可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現的分離。

2)父元素設定overflow：hidden

通過設定父元素overflow值設定為hidden；在ie6中還需要觸發 haslayout ，例如 zoom：1；

<

div 
class
="warp"
id="float"
style
="overflow:hidden; *zoom:1;"
>
<
h2>2)父元素設定 overflow 
h2>
<
div 
class
="main left"
>.main
div>
<
div 
class
="side left"
>.side
div>
div>

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

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

3)父元素設定overflow：auto屬性

同樣ie6需要觸發haslayout，演示和3差不多

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

缺點：多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等，firefox早期版本會無故產生focus等。

4）使用:after偽元素

需要注意的是 :after是偽元素，不是偽類（某些css手冊裡面稱之為「偽物件」），很多閉合浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。

.clearfix:after 

.clearfix

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

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

$$小結$$

通過對比，我們不難發現，其實以上列舉的方法，無非有兩類：

其一，通過在浮動元素的末尾新增乙個空元素，設定 clear：both屬性，after偽元素其實也是通過 content 在元素的後面生成了內容為乙個點的塊級元素；

其二，通過設定父元素 overflow。

CSS之清除浮動的幾種常用方法小結

在浮動元素末尾新增乙個空的標籤例如 其他標籤br等亦可。class warp id float class main left maindiv class side left sidediv div div 優點 通俗易懂，容易掌握 缺點 可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現...

清除浮動的幾種常用方法

首先，浮動這個樣式的出現，僅僅只是為了實現 環繞的效果，現在大多時利用浮動來布局 浮動 使元素推理文件流，按照指定方向發生移動 遇到父級邊界或者相鄰的浮動元素會停下來 浮動的特性 1，塊元素一行顯示多個 2，內聯元素支援寬高 3，沒有設定寬度時由內容撐開寬度 4，脫離文件流 浮動的破壞性 浮動元素脫...

CSS清除浮動常用方法小結

本文 常用的清除浮動的方法有以下三種 此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 三種清除浮動方法如下 1 使用空標籤清除浮動。我用了很久的一種方法，空標籤可以是div標籤，也可以是p標籤。我習慣用，夠簡短，也有很多人用，只是需要另外 為其清除邊框，但理論上可以是任何...