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>
分享到：
相关推荐
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Question 1: 上面的代码的能够实现清除浮动的问题吗？ ...
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
Dreamweaver怎么使用clear清除浮动？Dreamweaver中想要清除清除浮动命令，该怎么使用呢？下面我们就来详细介绍clear清除浮动的使用方法，需要的朋友可以参考下
css中3种清除浮动方法css中3种清除浮动方法
一般情况下： ... clear: both; display: block; float: none; font-size: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0;} 还有一种是 复制代码代码如下:.clearfix:a
下面小编就为大家带来一篇浅谈CSS中的clear清除浮动。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
总结下清除浮动的一般解决方案,做网页时要注意
关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html lang="en-US"> <head>...
课程关键词：清除浮动Clear.
在清除浮动前我们要了解两个重要的定义： 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 高度塌陷：浮动元素父元素...1、clear清除浮动（添加空div法） 在浮动元素
DIV+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。...
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动...
如何清除浮动？ 方法1： #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2： #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3...
分析：清除浮动大致有两种方案：clear、触发 BFC额外标签法: 在浮动元素平级的最后面添加额外元素，例如：<div class="clearfix"></d