CSS清除浮動的8大方法及使用環境
浮動會使當前標籤產生向上浮的效果,同時會影響到前後標籤、父級標籤的位置及 width height 屬性。而且同樣的代碼,在各種瀏覽器中顯示效果也有可能不相同,這樣讓清除浮動更難了。爲了解決浮動引起的問題有多種方法,但有些方法在瀏覽器兼容性方面還是有一些問題。
下面總結8種清除浮動的方法:
1,父級div定義 height
<style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: 父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。
2,結尾處加空div標籤 clear:both;
<style type="text/css">
.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;height:0;overflow:hidden;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理: 添加一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度
3,父級div定義 僞對象:after 和 zoom
<style type="text/css">
.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;overflow:hidden;}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: IE8以上和非IE瀏覽器才支持:after,原理和方法2有點類似,zoom可以解決ie6,ie7浮動問題
4,父級div定義 overflow:hidden
<style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: 必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度 。
5,父級div定義 overflow:auto
<style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: 必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
6,父級div 也一起浮動
<style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: 所有代碼一起浮動,就變成了一個整體 。
7,父級div定義 display:table
<style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理: 將div屬性變成表格
8,結尾處加 br標籤 clear:both
style type="text/css">
.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>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理: 父級div定義zoom:1來解決IE浮動問題,結尾處加 br標籤 clear:both