首先，來個demo，代碼如下：
html:
1 <div class="cont"> 2 <div class="cont1"></div> 3 <div class="cont2"></div> 4 <div class="cont3">你好,我是Mrxia</div> 5 </div>
css:
1 .clearfix:after { 2 visibility: hidden; 3 display: block; 4 font-size: 0; 5 content: " "; 6 clear: both; 7 height: 0; 8 } 9 .clear{ 10 clear:both; 11 } 12 .cont{ 13 border:1px solid #ddfe00;width:800px; 14 } 15 .cont1{ 16 width:200px;height:100px;background:#ffce80;float:left; 17 } 18 .cont2{ 19 width:200px;height:100px;background:#ccc;float:right; 20 }
效果圖如下所示：
由於浮動的原因，父級元素cont不能被撐開，div.cont3與div.con1、div.cont2保持在了同一行。
清除浮動，常用方式有以下幾種：
1.設置父元素的高度（局限性）
1 .cont{ 2 height:102px; 3 }
2.使用css的clear屬性
1 <div class="cont"> 2 <div class="cont1"></div> 3 <div class="cont2"></div> 4 <div class="clear">你好,我是Mrxia</div> 5 </div>
3.設置父元素overflow屬性（hidden/auto）
.cont{
overflow:auto;
}
4.使用clearfix（原理還是css的clear屬性）
1 <div class="cont clearfix"> 2 <div class="cont1"></div> 3 <div class="cont2"></div> 4 <div>你好,我是Mrxia</div> 5 </div>
clearfix說明：目的是創建一個隱形的內容為空的塊來為目標元素清除浮動。
清除浮動后效果，如下圖所示：
以上方法經筆者親測可用，也是一點總結，歡迎大家多提看法、評論。
本文為原創，轉載請注明出處！