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>
分享到：
相关推荐
在布局方面，HTML5引入了新的元素和方法来更好地控制页面结构，其中包括对清除浮动（clear floats）的支持。清除浮动是一个解决CSS布局问题的关键技术，特别是当我们在处理浮动元素时。 在CSS中，浮动（float）属性...
下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Question 1: 上面的代码的能够实现清除浮动的问题吗？ ...
为了解决这个问题，开发者通常会使用“清除浮动”（clearing the float）的方法，`.clear 万能清除浮动`（clearfix:after）就是一种常用的解决方案。 `.clear 万能清除浮动` 实际上是一种 CSS 技巧，用于修复由于...
**使用`clear`属性清除浮动的样式** `clear`属性有三个可能的值： 1. `none`（默认值）：元素可以出现在浮动元素的两侧。 2. `left`：元素不会出现在左侧有浮动元素的上方。 3. `right`：元素不会出现在右侧有浮动...
为了解决这个问题，CSS提供了多种清除浮动的方法。本文将详细讲解三种清除浮动的方法。 1. **传统方式：添加额外的 clearing div** 在浮动元素之后，可以添加一个额外的`<div>`并为其设置样式`clear: both;`。这...
Dreamweaver怎么使用clear清除浮动？Dreamweaver中想要清除清除浮动命令，该怎么使用呢？下面我们就来详细介绍clear清除浮动的使用方法，需要的朋友可以参考下
在实际使用中，经常通过给元素添加额外的清除浮动的样式来解决高度塌陷的问题。例如，可以在父元素的内部末尾添加一个清除浮动的空div元素，并使用class来指定其clear属性值。具体来说，如果想让该元素清除左边的...
本文将详细介绍`clear`属性及其使用方法，帮助理解如何通过该属性来调整元素的位置，并解决由浮动元素导致的布局问题。 ### 一、`clear`属性简介 `clear`属性用于指定一个元素的周围不允许出现浮动元素。它主要...
这种方法是最简单的清除浮动方式之一，只需要在浮动元素后面添加一个空的`<p>`标签或者`<div>`标签，并应用`clear:both;`样式即可。 **示例代码**： ```html .clr { clear: both; } <div id="left">Left ...
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。优点：简单，代码少，浏览器支持好，不容易出现怪问题。缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，...
解决这个问题，通常需要采用一些技术来“清除浮动”。 1. **清除浮动（Clearing Floats）**： - 最传统的方法是在父容器内部添加一个额外的标签，如`<div class="clear"></div>`，并设置`clear: both;`。这种方法...
CSS清除浮动是为了应对浮动元素对周围元素布局的影响，特别是防止父元素因子元素浮动而高度塌陷的问题。在Web开发中，有多种方法可以清除浮动，以下将详细介绍四种常见的清除浮动的方法。 一、使用带有`clear`属性...
因此，需要使用清除浮动的技术来解决这一问题。本文档将探讨清除浮动的多种方法，并分析其优缺点，以找出所谓的“最优方法”。 首先，浮动（float）属性是CSS中用于布局的主要属性之一。当元素设置为浮动状态时，它...
当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中，红色方块通过设置`float: left;`使其浮动到左侧，从而允许蓝色方块与其在同一行。这种布局方式在多列...
为了解决这个问题，我们需要掌握几种常见的清除浮动的方法。 #### 方法一：使用额外的标签进行清除 这种方法是最直观的一种方式，它通过在浮动元素后面添加一个额外的空标签（通常是`<div>`），并设置`clear:both`...
为了解决这个问题，有多种清除浮动的方法。 1. **传统方法：额外元素清除** 这是最原始的方法，即在父容器内添加一个额外的元素，通常使用`<div class="clear"></div>`，并为其设置样式`clear:both`。这样，这个...