css之清除区域

阅读: 811 评论: 2 作者: 铁拐李 发表于 2010-03-02 13:48 原文链接

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

 1 　　 < style type = " text/css " >
 2  * {margin: 0 ;padding: 0 ;}
 3  p{border: 1px #66CC00 solid;}
 4  img {
 5      width:40px;
 6      height:40px;
 7       float :left;
 8      border: 1px #66CC00 solid;
 9  }
10  h3{
11      clear:both;
12      border: 1px #66CC00 solid;
13      }
14  div{padding:20px;width:400px;height:400px;}
15  < / style>
16  < / head>
17 
18  < body >
19  < div >
20  < p > 我在上面 < / p>
21  < img src = " QQ截图未命名.png "   / >
22  < h3 > 我在下面 < / h3>
23  < / div>

效果：

 

为h3设置margin-top试试：

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

 来看看效果：

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

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

效果：

 

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

 1  < style type = " text/css " >
 2  * {margin: 0 ;padding: 0 ;}
 3  p{border: 1px #66CC00 solid;}
 4  img {
 5      width:40px;
 6      height:40px;
 7       float :left;
 8      border: 1px #66CC00 solid;
 9      margin - bottom:20px;
10  }
11  h3{
12      clear:both;
13      border: 1px #66CC00 solid;
14      }
15  div{padding:20px;width:400px;height:400px;}
16  < / style>
17  < / head>
18 
19  < body >
20  < div >
21  < p > 我在上面 < / p>
22  < img src = " QQ截图未命名.png "   / >
23  < h3 > 我在下面 < / h3>
24  < / div>

效果：
效果理想！

为浮动元素设置外边距，而不为“我在下面”（清除元素）设置上外边距，问题就解决了！

 

评论: 2　查看评论　发表评论

找优秀程序员，就在博客园

---

最新新闻：
· IBM发布第五代X架构 打破X86系统30年技术局限(2010-03-03 22:47)
· 互联网手机业务成香馍馍 上海电信盯牢3G市场(2010-03-03 22:38)
· Twitter信息总量即将突破100亿条大关(2010-03-03 22:34)
· Opera为何无法进一步拓展市场(2010-03-03 21:38)
· Symbian版 Skype登陆诺基亚Ovi Store(2010-03-03 21:04)

编辑推荐：Opera为何无法进一步拓展市场

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库