## 清除浮動 清除浮動主要為了解決父級元素因為子級元素浮動引起的內部高度為0的問題. 標準流當中,子元素有多高,父級高度就撐起來多高.這種情況不方便給父元素高度.比如不知道內容有多少. 一般情況下讓里面的元素自動撐開盒子. ## 父元素添加overflow 1.父元素添加 overflow : hidden . 觸發BFC,BFC可以清除浮動,這是解決方案. 缺點就是內容多的時候,內容會被隱藏掉 . ## 額外標簽法 W3C推薦的. 在浮動盒子的后面添加一個空盒子. 添加屬性 clear:both ; 缺點是增加無意義的標簽. 平時不這樣用. ## after 偽元素清除浮動 在父元素添加額外類,添加以下內容. 缺點是低版本不認識這個visibility. ``` .clearfix:after{ content: '.'; //內容為小點,盡量不要加空,否則瀏覽器有間隙 display: block; height: 0; visibility: hidden; //隱藏內容 clear:both; } .clearfix{ *zoom: 1; //代表帶有* 號的屬性,只有IE6和7才執行,zoom就是IE6,7來清除浮動的 } ``` ## 雙偽元素清除浮動 推薦使用這種方法, 代碼更簡潔. 在父元素添加屬性 ``` .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; } ```