子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超过时,会被隐藏掉。