clear 清除浮动问题

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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="###">删除</a></div>
			
		</div>
		
		
	</div>
</body>
</html>

你可能感兴趣的:(css,float,布局问题)