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>此方法适合任何清除浮动,防止父容器塌陷的情况。