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>

此方法适合任何清除浮动，防止父容器塌陷的情况。