清除区域：在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>效果：
效果理想！
为浮动元素设置外边距，而不为“我在下面”（清除元素）设置上外边距，问题就解决了！
粤ICP备09177306号
0 Comments.