相信不少跟我一樣的前端新手在利用float浮動來進行頁面的佈局和定位時都會遇到這樣的問題：一旦當前浮動元素的父級div不設定固定的高度height時，浮動的元素無法將父級div的內容撐開。導致整個頁面的佈局都亂了。究其原因竟是因為沒有“清除浮動”。因為之前在實際專案開發中就遇到過這個問題，給自己造成了不少的困擾。現在想把自己用到的清除浮動的方法跟大家分享下，菜鳥學飛，總結得不全面還請各位大牛多多指教。

1）新增額外標籤

在浮動元素末尾新增一個空的標籤例如 <div style=”clear:both”></div>，其他標籤br等亦可。

 <div class="wrap" id="float1">

<h2>新增額外標籤</h2>

<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：auto，具體示例程式碼如下：

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">

<h2>父元素設定 overflow </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

<div class="footer">.footer</div>

3）父元素設定display:table

4）使用:before，:after 偽元素（個人比較推薦）

該方法通過在浮動元素的父級元素上新增一個具有清除浮動功能的類來實現清除浮動效果：

.clearfix:before,.clearfix:after{display:table;content:"";}

.clearfix:after{clear:both;}

<div class="wrap  clearfix" id="float3" >

<h2>父元素設定 新增類clearfix </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

注：菜鳥對於文字語言的把握可能不大好，表達的意思大家懂就好，另外附件一份自己此前看過得大牛關於清除浮動的講解，有興趣的童鞋可以下載下來看看。