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 { 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;padding-bottom:10px;}
#box p {display: inline; float: left; 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 { 210px;overflow: hidden;border: 1px solid green;margin: 10px auto 0;}
#box p {display: inline; float: left; 50px;border: 1px solid red;margin: 10px 5px;}?
#box br {clear:both;}