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>
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 }
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 }
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 *{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>
效果理想！
为浮动元素设置外边距，而不为“我在下面”（清除元素）设置上外边距，问题就解决了！
