浮动，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="jike9.jpg" />
</div>
</body>
</html>
这种方法的优点是代码量比较少
第二种方法是after伪元素选择器法
这种方法用到了CSS-hack方法，可以看以前收集的CSS-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>
这两种应该算是除了添加标签外比较常用的清除浮动的方法了。也是很好体现了结构-样式-行为分离原则的方法了。
时间： 2024-12-24 21:10:15