清除浮動其實主要解決的就是高度塌陷問題，具體在此不再贅述~~~那些年我們一起清除過的浮動（大佬博客，寫的挺不錯）
方法小結：1.
1）添加額外標簽
這是在學校老師就告訴我們的 一種方法，通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。
<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)父元素設置 overflow：hidden
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
<div class="wrap" 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>
優點：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；04年POPO就發現overflow:hidden會導致中鍵失效，這是我作為一個多標簽瀏覽控所不能接受的。所以還是不要使用.
3）父元素也設置浮動
優點：不存在結構和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用
上面的幾種方法都有各種各樣的問題，下面的推薦方法：
4）使用:after 偽元素
需要注意的是 :after是偽元素（Pseudo-Element），不是偽類（某些CSS手冊里面稱之為“偽對象”）.
由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
該方法源自於: How To Clear Floats Without Structural Markup
原文全部代碼如下:
<style type="text/css">
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
<!--[if IE]>
<style type="text/css">
.clearfix {zoom: 1;/* triggers hasLayout */ display: block;/* resets display for IE/Win */} </style>
<![endif]-->
鑒於 IE/Mac的市場占有率極低,我們直接忽略掉,最后精簡的代碼如下:
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
或者
通過增加before即可避免瀏覽器頂部崩潰，是一種推薦大家使用的方法！
補充：
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內容破壞原有布局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互;
4）通過 content:"."生成內容作為最后一個元素，至於content里面是點還是其他都是可以的，例如oocss里面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。