子DIV使用float后撑不开父DIV的问题

子div使用float后撑不开父div的问题  

2011-04-16 12:21:19|  分类： CSS |  标签：div  height  撑开  ie6  auto  |举报|字号 订阅

子div使用float后不撑开父div的问题。
　　方法出处，但是之间的区别是我自己总结的:　
　　http://blog.csdn.net/qsdnet/archive/2007/03/19/1534005.aspx　　　
　　　　
　　
　　背景:
　　ie6父div不管加不加height，指不指定固定的height都可以自动撑开的。
　　ie7 父div加了固定height高度后撑不开，不设置height或者使用height:auto;后可以撑开。
　　ff下面父div不管使用height:auto;或者不使用height都撑不开，需要使用下面方法。
　　
　　　
　　--注意--:　使用下面方法时，父div的height很关键，可以不要这个值，要的话应该设成height:auto;
　　　　 　

　　方法1:
<div>
<div></div>
</div>
如果子div用了float，那么display:block和clear:both两个样式就没了，所以就不会撑开父div,可以在子div后面加一个<div style="clear:both"></div>来解决。　如下:　
　　<div>
<div></div>
<div style="clear:both"></div>
</div>
　　此方法对ie6、ie7、ff都有效，但是如果指定了固定height值，那么ie6可以撑开，ie7和ff都撑不开;　使用height:auto;后ie6 ie7 ff都可以撑开。
　　　
　　　
　　
　　方法2:
a.定义一个伪对象。
.clearfix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
b.让父对像使用此class。
<div class="clearfix">
<div></div>
</div>　　

　　　　此方法对ie6、ie7、ff都有效，但是如果指定了固定height值，那么ie6可以撑开，ie7和ff都撑不开。使用height:auto;后ie6 ie7 ff都可以撑开。

顺便总结一下怎么让子对象撑不开父对象的方法。　
　　
用overflow防止子对象撑开父对象。
　　<div>
<div></div>
</div>　　
　　　
父div如果用了overflow:auto; 那么子div超过时，会以父div高度出现滚动条。
　　父div如果用了overflow:hidden;　那么子div超过时，会被隐藏掉。