IE6+以上清除浮動廣泛方法總結

時間 2019-11-29

標籤 ie6 以上清除浮動廣泛方法總結欄目瀏覽器简体版

原文原文鏈接

浮動，CSSfloat屬性。學過的人應該知道這個屬性，平時用的應該也是不少的。特別是在N欄佈局中。css

可是咱們會常常遇到這樣一種狀況，前面的元素浮動以後會影響後面的元素，後面的元素須要用清除浮動來消滅前面元素的影響。html

之前常常就是用<div style="clear:both"></div>或者<br style="clear:both" />這樣的方法，甚至於有人以爲在HTML加標籤很low，因此就用JS手動在DOM中插入這樣的清除浮動的標籤以達到清楚浮動的目的。chrome

可是這樣就有點違背了咱們提倡的結構-樣式-行爲分離的原則了。佈局

因此，我認爲清除浮動應該在CSS中操做，而不是在HTML或者JS中。學習

第一種：overflow方法。ui

這是一種很神奇的方法，我之前學習CSS的時候本身摸索過這種方法，也是發現的除添加標籤外的第一種用CSS清除浮動的方法。spa

這種方法的也用到了hack的原則，兼容IE6。overflow在IE7+才能夠用htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>overflow清除浮動</title>
<style type="text/css">
	div{
		overflow:hidden;
		background: #f00;
		_zoom:1;
	}
	img{
		float:left;
	}
</style>
</head>
<body>
	<div>
		<img src="jike9.jpg" />
	</div>
</body>
</html>

這種方法的優勢是代碼量比較少blog

第二種方法是after僞元素選擇器法utf-8

這種方法用到了CSS-hack方法，能夠看之前收集的CSS-hack彙總

點擊這裏查看hack

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>overflow清除浮動</title>
<style type="text/css">
	div{
		background: #f00;
		*zoom:1; /*IE6,IE7*/
	}
	div:after{ /*IE8+*/
		content:'';
		display: table;
		clear:both;
	}
	img{
		float:left;
	}
</style>
</head>
<body>
	<div>
		<img src="jike9.jpg" />
	</div>
</body>
</html>