清除浮動的方法

清除浮動本質： 解決父級元素由於子級浮動引發內部高度爲0 的問題。

清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其餘元素。

清除浮動的方法：

選擇器`{clear:left | right | both;}`

1 額外標籤法：
W3C推薦的作法是經過在浮動元素末尾添加一個空的標籤例如<div style=」clear:both」></div> ，或則其餘標籤br等亦可。
優勢： 代碼簡潔
缺點： 內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。
2 父級添加overflow屬性方法
能夠經過觸發BFC的方式，能夠實現清除浮動效果。
能夠給父級添加： overflow爲 hidden|auto|scroll 均可以實現。
優勢： 代碼簡潔
缺點： 內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。
3 使用after僞元素清除浮動

.clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   ie六、7 專有

優勢： 符合閉合浮動思想 結構語義化正確
缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
表明網站： 百度、淘寶網、網易等
4 after僞元素空餘字符法
content:"200B";這個參數，Unicode字符裏有一個「零寬度空格」，即 U+200B，代替原來的「.」，能夠縮減代碼量。並且再也不使用visibility:hidden。

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.

固然有些網站也用 content:"0200" 的，都是空格的意思。
表明網站： 阿里巴巴等
5 使用before和after雙僞元素清除浮動

.clearfix:before,.clearfix:after{ 
           content:".";
           display:table;
   }
.clearfix:after{
 clear:both;
}
.clearfix{*zoom:1;}

優勢： 代碼更簡潔
缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
表明網站： 小米、騰訊等