css之清除区域

   清除区域:在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>
效果:
效果理想!

为浮动元素设置外边距,而不为“我在下面”(清除元素)设置上外边距,问题就解决了!


 





posted on 2010-03-02 13:48  铁拐李  阅读(1913)  评论(2编辑  收藏  举报