div:after{clear:both; content:'.' height:0; visibility:hidden; diplay:block;}
只能清楚ff这样的标准浏览器的浮动,ie不可以,这个方法也不完整,你的clear也不那么完美
.cleardiv{clear:both;*display:inline;overflow:hidden;}
.clear{zoom:1;}
.clear:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
用法1:
<div style="float:left"></div>
<div style="float:left"></div>
<div class="cleardiv"></div>
用法2:
<ul class="clear">
<li style="float:left"></li>
<li style="float:left"></li>
<li style="float:left"></li>
<li style="float:left"></li>
</ul>
下面是具体的一段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<style type="text/css">
#user_content{
width:998px;
height: auto;
overflow:hidden;
border:1px solid #ccc;
font-size:14px;
}
.clear{
clear: both;
height: 0px;
font-size: 1px;
line-height: 0px;
display:inline;
overflow:hidden;
}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { zoom:1; }
.dt_head{
display: inline;
position: relative;
width:100px;
height:25px;
float:left;
padding:2px 5px;
background: #eee;
border: 1px solid #ccc;
margin: 5px 5px;
}
.dt_body{
display: inline;
position: relative;
width:100px;
height:25px;
float:left;
padding:2px 5px;
background: white;
border: 1px solid #ccc;
margin: 5px 5px;
}
</style>
</head>
<body>
<div id="user_content">
<div class="dt_head">id:</div><div class="dt_head">用户名:</div><div class="dt_head">密码:</div><div class="dt_head">操作:</div>
<!-- 解决ie6,7下清除浮动问题 ,如果不加下面的代码,ie6下,会自动浮动到上面来,用<div class="clearfix">不起重要</div>-->
<div class="clear"></div>
<div class="clearfix ">
<div class="dt_body"> 2</div>
<div class="dt_body">lisi</div>
<div class="dt_body">123465</div>
<div class="dt_body"><a href="###">修改</a> <a href="###">删除</a></div>
</div>
<div class="clearfix ">
<div class="dt_body"> 2</div>
<div class="dt_body">lisi</div>
<div class="dt_body">123465</div>
<div class="dt_body"><a href="###">修改</a> <a href="###">删除</a></div>
</div>
<div class="clearfix ">
<div class="dt_body"> 2</div>
<div class="dt_body">lisi</div>
<div class="dt_body">123465</div>
<div class="dt_body"><a href="###">修改</a> <a href="###">删除</a></div>
</div>
</div>
</body>
</html>