万能清除浮动方法在firefox中的一个bug
2010年7月11日
这个问题和以往的不同，问题只存在于firefox中，让人颇为“兴奋”。问题是这样的：当一个元素X内部有浮动元素并且自身使用了“万能清除浮动方法”，其下面的元素Y如果有margin-top值，则会在X元素上方产生一个与Y元素margin-top值相同高度的空白区域，Y元素margin-top值改变，空白区域的高度随之改变。此问题截图如下：查看此bug的demo
在其它浏览器（IE6/IE7/IE8/google chrome/opera/safari）中表现正常，截图为：
主要的结构为：
<div class="wrap">
<div class="head clear_float">
<div style="float:left;">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
<div style="float:right;">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
</div>
<div class="box">之路--前端开发爱好者--万能清除浮动方法在firefox中的一个bug(firefox only)</div>
</div>
主要的样式为：
.clear_float:after{
display:block;
visibility:hidden;
height:0;
clear:both;
content:"";
}
.clear_float{display:block; zoom:1;}
.wrap{width:960px; margin:0 auto auto auto;}
.head{width:960px; margin-left:auto; margin-right:auto; background-color:#FF0000;}
.box{width:960px; margin:20px auto 4px auto; background-color:#003300; padding:0 0 10px 0;}
之所以说这个问题和清除浮动的方法有关，是因为如果X元素里面没有浮动元素，当然X元素就没有必要使用清除浮动了，这种情况下在firefox里面是没有本文所说的这个问题，所有浏览器下解析一致。理由2是经过测试，如果给清除浮动的class里面的content加“.”，就能解决这个问题。
经过测试，此问题的解决方法如下：
方法1：给X元素（本文中指class为head的元素）padding-top或者padding-bottom值
方法2：给X元素（本文中指class为head的元素）height值
方法3：给清除浮动的class的content加“.”
方法4：给X元素（本文中指class为head的元素）加overflow:hidden
方法5：给X元素（本文中指class为head的元素）上边框或下边框值
最近评论