css技巧八：div浮动塌陷问题
- 作者：网页模板
- 类型：文章教程
- 点击次数：
- 发布时间：2014-04-02 09:38
当父div里面的内容有浮动的时候，如果这个父div没有设置高度，或者设置的高度不够，就会导致父div塌陷，即没设置高度时，父div会变成一条线，父div下面的内容和父div里面的内容重叠，设置了高度，会发现里面的内容溢出，解决办法：
html代码：
1、修改html代码如下
(责任编辑：网页模板)
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>
解决方法三：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>
(责任编辑：网页模板)
- 本文标签：
- div浮动塌陷
