整理自撩課學院（www.itlike.com）
使用原因
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題； 只要把浮動的盒子圈到里面帕涌，讓父盒子閉合出口和入口不讓它們出來影響其他元素摄凡。
標準流.png
浮動后.png
清除浮動的方法
1）額外標簽法
方式：
通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或其它標簽
優(yōu)點：
1蚓曼、W3C推薦的做法
2亲澡、通俗易懂，書寫方便
缺點：
添加許多無意義的標簽纫版，結構化較差
2）父級添加overflow屬性
方式：
通過觸發(fā)BFC的方式床绪，可以實現(xiàn)清除浮動效果 (BFC)∑浔祝可以給父級添加： overflow為 hidden|auto|scroll
優(yōu)點：
代碼簡潔
缺點：
內容增多時候容易造成不會自動換行導致內容被隱藏掉癞己，無法顯示需要溢出的元素
3）使用after偽元素
方式：
給父元素添加clearfix類
優(yōu)點：
不用單獨加新標簽，符合閉合浮動思想 結構語義化正確
缺點：
由于IE6-7不支持:after梭伐，需要使用 zoom:1觸發(fā) hasLayout
注意：
content:"." 里面盡量跟一個小點痹雅，或者其他，盡量不要為空糊识，否則在firefox 7.0前的版本會有生成空格绩社。
代碼：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* IE6、7 專有 */
4）使用before和after雙偽元素
方式：
給父元素添加clearfix類
優(yōu)點：
代碼更簡潔
缺點：
由于IE6-7不支持:after赂苗，需要使用 zoom:1觸發(fā) hasLayout
代碼：
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
