码迷,mamicode.com
首页 > 其他好文 > 详细

解决float浮动定位时父元素的高度为0的情况

时间:2015-11-07 00:47:20      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:


首先我想实现这样一个效果:

技术分享

 
我设置一个<div class="content"></div>背景为黄色,然后在其中设置两个div
分别为<div class="left"></div> ,<div class="right"></div>分别设置左浮动,背景
颜色蓝色和右浮动背景颜色红色
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘>
<title></title>
<style type="text/css">
.content{background: yellow;width:900px;}
.left{background: blue; height: 200px; width: 600px;float: left;}
.right{background: red; height: 500px; width: 300px;float: left;}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

但是我发现运行效果是这个样子的:

技术分享

 

这是由于浮动产生的影响,在这里就要对 父元素清除浮动,但是在这里用clear:borth;却没有效果,
因此要用到清除浮动的第二种办法overflow:hidden;

.content{background: yellow;width:920px;overflow: hidden;}

最终实现效果:

技术分享

 


解决float浮动定位时父元素的高度为0的情况

标签:

原文地址:http://www.cnblogs.com/zhanyou/p/4943949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!