相信不少跟我一樣的前端新手在利用float浮動來進行頁面的布局和定位時都會遇到這樣的問題：一旦當前浮動元素的父級div不設定固定的高度height時，浮動的元素無法將父級div的內容撐開。導致整個頁面的布局都亂了。究其原因竟是因為沒有「清除浮動」。因為之前在實際專案開發中就遇到過這個問題，給自己造成了不少的困擾。現在想把自己用到的清除浮動的方法跟大家分享下，菜鳥學飛，總結得不全面還請各位大牛多多指教。
1）新增額外標籤
在浮動元素末尾新增乙個空的標籤例如
，其他標籤br等亦可。
.main
.side
.footer
2)父元素設定 overflow：hidden/overflow：auto，具體示例**如下：
.main
.side
.footer
3）父元素設定display:table
4）使用:before，:after 偽元素（
個人比較推薦
）
該方法通過在浮動元素的父級元素上新增乙個具有清除浮動功能的類來實現清除浮動效果：
.clearfix:before,.clearfix:after
.clearfix:after
.main
.side
CSS清除浮動方法總結
總括 詳細總結了css中清楚浮動的幾種方法。在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了...
CSS技巧 清除浮動
什麼是css清除浮動？在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進...
css清除浮動的方法總結
在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了，下面總結8種清除浮動的方法，測試已通過 ie chrome firefox opera，需要的朋友可以參考下 清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前...