浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到 塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣。正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。下面我們來介紹7種閉合CSS浮動的方法。

1、添加額外標簽
這是在學校老師就告訴我們的一種方法，通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。
<div class="warp" id="float1">
<h2>1）添加額外標簽</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
優點：通俗易懂，容易掌握
缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之后還是建議不要用了吧。
2、使用 br標簽和其自身的 html屬性
這個方法有些小眾，br 有 clear=“all | left | right | none” 屬性
<div class="warp" id="float2">
<h2>2）使用 br標簽和其自身的 html屬性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>
優點：比空標簽方式語義稍強，代碼量較少
缺點：同樣有違結構與表現的分離，不推薦使用
3、父元素設置 overflow：hidden
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素設置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
優點：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；

4、父元素設置 overflow：auto 屬性
同樣IE6需要觸發hasLayout，演示和3差不多
優點：不存在結構和語義化問題，代碼量極少
缺點：多個嵌套后，firefox某些情況會造成內容全選；IE中 mouseover 造成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無故產生focus等

5、父元素也設置浮動
優點：不存在結構和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用
6、父元素設置display:table
優點：結構語義化完全正確，代碼量極少
缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用
7、使用:after 偽元素
需要注意的是 :after是偽元素，不是偽類（某些CSS手冊里面稱之為“偽對象”），很多清除浮動大全之類的文章都稱之為偽類，不過csser要嚴謹一點，這是一種態度。

7種閉合CSS浮動的方法到這里全部講完了，通過對比，我們不難發現，其實以上列舉的方法，無非有兩類：其一，通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；其二，通過設置父元素 overflow 或者display：table 屬性來閉合浮動。想深入學習的小伙伴可以來本站的CSS教程一起來探討一下閉合CSS浮動的原理。