css的clear

最新推荐文章于 2025-08-07 11:58:47 发布

转载最新推荐文章于 2025-08-07 11:58:47 发布 · 1.5k 阅读

文章标签：

#css #border #div #qq

css 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨CSS的clear属性，解释其如何在不同浏览器版本中为元素添加清除空间，以解决浮动元素导致的布局混乱。通过实际代码示例，展示如何在不改变元素原有样式的情况下，利用clear属性实现布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clear可以用在普通元素，该元素本身自己不必float

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距（margin-top）实现的。在 CSS2.1 中，会在元素上外边距（margin-top）之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

***********************************************************************************************************************************************************************************

http://www.jb51.net/css/24902.html

点评：清除区域：在css2.1中引入了一个清除区域，当为一个元素使用clear时，他的外边距并没有发生变化，而是这个清除区域使得元素落在了浮动元素的下面。
代码如下:

<style type="text/css">
*{margin:0;padding:0;}
p{border: 1px #66CC00 solid;}
img {
width:40px;
height:40px;
float:left;
border: 1px #66CC00 solid;
}
h3{
clear:both;
border: 1px #66CC00 solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
</head>
<body>
<div>
<p>我在上面</p>
<img src="QQ截图未命名.png" />
<h3>我在下面</h3>
</div>

效果：

为h3设置margin-top试试：

代码如下:

h3{
clear:both;
border: 1px #66CC00 solid;
margin-top:30px;
}

来看看效果：

没有变化，清除区域在起作用了，改变一下：
代码如下:

h3{
clear:both;
border: 1px #66CC00 solid;
margin-top:60px;
}

效果：

有了16px的间距了，我们可以理解这个margin是相对于“我在上面”计算的，其实是这个清除区域在作怪，我们可以简单的设置一下：

代码如下:

<style type="text/css">
*{margin:0;padding:0;}
p{border: 1px #66CC00 solid;}
img {
width:40px;
height:40px;
float:left;
border: 1px #66CC00 solid;
margin-bottom:20px;
}
h3{
clear:both;
border: 1px #66CC00 solid;
}
div{padding:20px;width:400px;height:400px;}
</style>
</head>
<body>
<div>
<p>我在上面</p>
<img src="QQ截图未命名.png" />
<h3>我在下面</h3>
</div>

效果：