CSS 清除浮動

一、為什么要清除浮動

　　浮動本質是用來做文字混排效果的，但是拿來做布局用，則會有很多的問題出現。

　　由於浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，就需要在該元素中清除浮動，准確地說，並不是清除浮動，而是清除浮動后造成的影響。

二、清除浮動的本質

　　清除浮動主要為了解決父級元素因為子級浮動引起內部高度為 0 的問題。

　　

　　

　　　

 

三、清除浮動的方法

　　　清除浮動本質叫做閉合浮動更好一些。清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

　　　clear 屬性用於清除浮動，其基本語法格式如下：

選擇器 {clear:屬性值;}

 

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

　　  方法1：給父級 div 定義 height

　　　　Demo：

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>  7 <div class="div1">  8　　 <div class="left">Left</div>  9 　　<div class="right">Right</div> 10 </div> 11 <div class="div2"> 12 div2 13 </div> 

　　　　　原理：父級 div 手動定義 height，就解決了父級 div 無法自動獲取高度的問題。

　　　　　優點：簡單，代碼少，容易掌握

　　　　　缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級 div 不一樣時，會產生問題。

　　　　　建議：不推薦使用，只建議高度固定的布局時使用

　　　方法2：結尾處加空 div  標簽 clear:both

　　　　Demo:

<style type="text/css">  2 .div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮動代碼*/ 
.clearfloat{clear:both} 
</style>  9 <div class="div1"> 10 　　<div class="left">Left</div> 11 　　<div class="right">Right</div> 12 　　<div class="clearfloat"></div> 13 </div> 14 <div class="div2"> 15 div2 16 </div> 

 　　　　　原理：添加一個空 div，利用 CSS 提供的 clear:both 清除浮動，讓父級 div 能自動獲取高度。

　　　　     優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

　　　　　 缺點：如果頁面浮動布局多，就要增加很多空 div ,添加很多不必要的標簽

　　　　　 建議：不推薦使用，但次方法是以前主要使用的一種清除浮動方法　　 

　　　方法3：使用 after偽元素 和 zoom來清除浮動 （推薦使用）

　　　　Demo：

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮動代碼*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 10 <div class="div1 clearfloat"> 11 　　<div class="left">Left</div> 12 　　<div class="right">Right</div> 13 </div> 14 <div class="div2"> 15 div2 16 </div> 

　　　　　原理：IE8 以上和非 IE 瀏覽器才支持 :after,原理和方法2相似， zoom(IE專有屬性，瀏覽器駭客) 可解決 IE6，IE7浮動問題。

　　　　　優點：瀏覽器支持好，不容易出現怪異問題。

　　　　　缺點：代碼多，需要兩句代碼結合使用才能讓主流瀏覽器支持。使用 zoom:1觸發 hasLayout。

　　　　　建議：推薦使用，建議定義公共類，來減少 CSS 代碼。

　　　方法4：父級 div  定義 overflow:hidden

　　　　Demo:

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>  7 <div class="div1">  8 　　<div class="left">Left</div>  9 　　<div class="right">Right</div> 10 </div> 11 <div class="div2"> 12 div2 13 </div>

　　　　　原理：必須定義 width 或 zoom:1,同時不能定義 height,使用 overflow:hidden 時，瀏覽器會自動檢查浮動區域的高度。

　　　　　優點：簡單，代碼少，瀏覽器支持好。

　　　　　缺點：不能和 position 配合使用，因為超付的尺寸的會被隱藏。

　　　　　建議：只推薦沒有使用 position 或對 overflow:hidden 理解深刻的朋友使用。

　　　方法5：父級 div 定義 overflow：auto

　　　　Demo:

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>  7 <div class="div1">  8 　　<div class="left">Left</div>  9 　　<div class="right">Right</div> 10 </div> 11 <div class="div2"> 12 div2 13 </div> 

　　　　　原理：必須定義 width 或 zoom:1,同時不能定義 height，使用 overflow:auto 時，瀏覽器會自動檢查浮動區域的高度。

　　　　　優點：簡單、代碼少、瀏覽器支持好。

　　　　　缺點：內部寬高超過父級 div 時，會出現滾動條。

　　　　　建議：不推薦使用，除非需要出現滾動條或者確保不會滾動條的時候才使用。

　　　方法6：父級 div 也一起浮動

　　　　Demo：

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>  7 <div class="div1">  8 <div class="left">Left</div>  9 <div class="right">Right</div> 10 </div> 11 <div class="div2"> 12 div2 13 </div> 

 　　　　　原理：所有代碼一起浮動。就變成了一個整體。

　　　　　 優點：沒有優點。

　　　　　 缺點：會產生新的浮動問題。

　　　　　 建議：不推薦使用，只做了解。

　　　方法7：父級 div 定義 display:table

　　　　Demo:

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>  7 <div class="div1">  8 <div class="left">Left</div>  9 <div class="right">Right</div> 10 </div> 11 <div class="div2"> 12 div2 13 </div> 

　　　　　原理：將 div  屬性變成表格。

　　　　　優點：沒有優點。

　　　　　確點：會產出新的未知問題。

　　　　　建議：不推薦使用，只做了解。

　　　方法8：結尾處加 br 標簽 clear:both

　　　　Demo:

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.div2{background:#800080;border:1px solid red;height:100px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clearfloat{clear:both} 
</style>  8 <div class="div1">  9 <div class="left">Left</div> 10 <div class="right">Right</div> 11 <br class="clearfloat" /> 12 </div> 13 <div class="div2"> 14 div2 15 </div> 

　　　　　原理：父級 div 定義 zoom:1 來解決IE浮動問題，結尾處加 br 標簽 clear:both

　　　　　建議：不推薦使用，只做了解　　

　　方法9：使用 before 和 after 雙偽元素清除浮動（推薦使用）

　　　　Demo：

<style type="text/css">  2 .div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
 .left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
 /*清除浮動代碼*/ 
.clearfix:before,.clearfix:after { 
 content:"";
 display:table;  /* 這句話可以出發BFC BFC可以清除浮動 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}
 </style> 18 <div class="div1 clearfloat"> 19  　　<div class="left">Left</div> 20 　　 <div class="right">Right</div> 21 </div> 22 <div class="div2"> 23  div2 24 </div> 

　　　　　　原理：同方法2

　　　　　　優點：代碼更簡潔

　　　　　　缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

　　　　　　建議：推薦使用，完美

 

　　　　更多的知識請參考這篇文章：清除浮動