css clearfix(针对火狐height:auto无效解决方案)

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=