<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>火狐浏览器的怪癖
</title>
<style>
*{ margin:0; padding:0; }
body{ font:12px/1.5 tahoma,arial,\5b8b\4f53; border: 1px dotted red; }
.clearfix:after{ clear:both; content:''; display:block; height:0; }/* 如果设置overflow:auto/hidden,该现象消失 */
.clearfix{ zoom:1; }/* 如果设置overflow:auto/hidden...(非visible),该现象消失 */
ul li{ float:left; margin-right:30px; }
.box{ margin:auto; width:900px; }
.bottom{ margin-top:100px; }
</style>
</head>
<body>
<div class="box"><!-- 不要给box设置border/padding，否则这种现象就不会出现了 -->
<ul class="clearfix"><!-- 块状元素 -->
<li><!-- 设置浮动 -->
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
</li>
<li><!-- 设置浮动 -->
QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ
</li>
</ul>
<div class="bottom"><!-- 调节bottom的margin-top值，你会很容易发现这种现象 -->
PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/Adeline-p2y/archive/2012/11/19/2776680.html
