clear 清除浮动问题

最新推荐文章于 2024-07-16 17:16:30 发布

chen106106

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量157

点赞数

分类专栏： CSS学习笔记文章标签： css float 布局问题

本文链接：https://blog.csdn.net/chen106106/article/details/84253213

版权

CSS学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

chen106106

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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;}...
复制链接

扫一扫