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>

这两种应该算是除了添加标签外比较经常使用的清除浮动的方法了。也是很好体现告终构-样式-行为分离原则的方法了。

第三种方法是clear:both

这种方法很容易想，无论是div或者是hr均可以用，定义一个类就好