首页 > 代码库 > IE6+以上清除浮动普遍方法总结

IE6+以上清除浮动普遍方法总结

2024-10-24 11:34:39   209人阅读

浮动，CSSfloat属性。学过的人应该知道这个属性，平时用的应该也是很多的。特别是在N栏布局中。

但是我们会经常遇到这样一种情况，前面的元素浮动之后会影响后面的元素，后面的元素需要用清除浮动来消灭前面元素的影响。

以前经常就是用<div style="clear:both"></div>或者<br style="clear:both" />这样的方法，甚至于有人觉得在HTML加标签很low，所以就用JS手动在DOM中插入这样的清除浮动的标签以达到清楚浮动的目的。

但是这样就有点违背了我们提倡的结构-样式-行为分离的原则了。

所以，我认为清除浮动应该在CSS中操作，而不是在HTML或者JS中。

 第一种：overflow方法。

这是一种很神奇的方法，我以前学习CSS的时候自己摸索过这种方法，也是发现的除添加标签外的第一种用CSS清除浮动的方法。

这种方法的也用到了hack的原则，兼容IE6。overflow在IE7+才可以用

<!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="http://www.mamicode.com/jike9.jpg" />
	</div>
</body>
</html>

这种方法的优点是代码量比较少

第二种方法是after伪元素选择器法

这种方法用到了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="http://www.mamicode.com/jike9.jpg" />
	</div>
</body>
</html>

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

第三种方法是clear:both

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

IE6+以上清除浮动普遍方法总结


联系
我们