Firefox等符合W3C標準的瀏覽器中，如果有一個DIV作為外部容器，內部的DIV如果設置了float樣式，則外部的容器DIV因為內部沒有clear，導致不能被撐開。

例：

<div style=" border:2px solid #0CC; width:600px;" >
?<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
??? <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
<!-- <div style="clear:both"></div>-->
</div>

解決方法如下，

1.

<div style=" border:2px solid #0CC; width:600px;" >
?<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
??? <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
<div style="clear:both"></div>???? </div>

在float:left的Div之后 加入<div style="clear:both"></div>? 這樣加入的弊端是，JS DOM找節(jié)點時會出現了一個多余的節(jié)點，這個也是個沒用的DIv

2.直接在最大層加入 overflow:hidden; 這也是我用的解決手法！！ 簡單--

<div style=" border:2px solid #0CC; width:600px;overflow:hidden; " >
?<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
??? <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
</div>

3.今天研究163代碼的時候 也發(fā)現一種新的解決方法 就是加入一個偽類！

<div style=" border:2px solid #0CC; width:600px;" class="clearfix"?>
?<div style=" width:50px; height:600px; border:#099 1px solid; margin-left:5px; float:left;display:inline"></div>
??? <div style=" width:50px; height:40px; border:#099 1px solid; margin-left:5px; float:left;display:inline "></div>

<div style=" width:50px; height:40px; border:#099 1px solid;float:right "></div>
</div>

Css如下：

<style>

.clearfix:after{context:"."; height:"0"; display:block;clear:both;visibility:hidden}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

</style>

至于這種方法，IE5.5下 對此類并不支持！！

轉載于:https://www.cnblogs.com/phw0921/archive/2010/03/31/1701635.html

總結

以上是生活随笔為你收集整理的css clearfix(针对火狐height:auto无效解决方案)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。