css clearfix(針對火狐height:auto無效解決方案)
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找節點時會出現了一個多餘的節點，這個也是個沒用的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程式碼的時候 也發現一種新的解決方法 就是加入一個偽類！
<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下 對此類並不支援！！
我個人認為，用清除浮動的方法比較好~