首页 > 建站教程 > Div+Css >  css技巧八:div浮动塌陷问题解决办法大全正文

css技巧八:div浮动塌陷问题解决办法大全

当父div里面的内容有浮动的时候,如果这个父div没有设置高度,或者设置的高度不够,就会导致父div塌陷,即没设置高度时,父div会变成一条线,父div下面的内容和父div里面的内容重叠,设置了高度,会发现里面的内容溢出,解决办法:
html代码:
<div id="father">
    <div id="son1">模板网</div>
    <div id="son2">网站模板</div>
</div>
解决方法一:
<style type="text/css">
#father{height:200px;} /*给父div加高,和浮动的内容一样高*/
#son1,#son2{height:200px; float:left; margin:0px;}
</style>
解决方法二:
<style type="text/css">
#father{overflow:hidden; *zoom:1;} /*给父div加overflow:hidden; *zoom:1;的样式。*/
#son1,#son2{height:200px; float:left; margin:0px;}
</style>
上面这种方法在大多数情况下比较好,但是,由于使用了 overflow:hidden; ,如果做二级菜单等,会导致二级菜单无法显示。

解决方法三:
1、修改html代码如下
<div id="father">
    <div id="son1">模板网</div>
    <div id="son2">网站模板</div>
    <div class="clear"></div>
</div>
2、css修改如下:
<style type="text/css">
#son1,#son2{height:200px; float:left; margin:0px;}
.clear{clear:both;}
</style>
解决方法四(极力推荐的方法):
1、修改html代码:
<div id="father" class="clearfix">
    <div id="son1">模板网</div>
    <div id="son2">网站模板</div>
</div>

2、css代码:
<style type="text/css">
#son1,#son2{float:left;}
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after {display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}
</style>
此方法适合任何清除浮动,防止父容器塌陷的情况。