1. 出现条件

元素被浮动, 且其后没有其他元素,元素的margin-bottom不为0或auto.

2. 症状

为元素指定的margin-bottom无效, 就像margin-bottom为0一样.

3. 受影响的浏览器

IE6, IE7

4. 原因

暂不知道

5. 解决方法

a. 取消元素的margin-bottom, 改为指定父元素的padding-bottom(推荐);
b. 在元素之后添加一个<br />, 为其指定如下样式(不推荐, 放在此处, 了解一下):
elem{clear:both;}

6. example

/* 使用是第1种方法 */
xhtml:
<div id="box">
<p>example 1</p>
<p>example 2</p>
</div>
css:
#box {width: 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;padding-bottom:10px;}
#box p {display: inline; float: left;width: 50px;border: 1px solid red;margin: 10px 5px 0;}
 
/* 使用是第2种方法 */
xhtml:
<div id="box">
<p>example 1</p>
<p>example 2</p>
<br />
</div>
#box {width: 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;}
#box p {display: inline; float: left;width: 50px;border: 1px solid red;margin: 10px 5px;}?
#box br {clear:both;}