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

Posted on 2015-11-06 23:39  谁乱了谁的夏天  阅读(355)  评论(0)    收藏  举报


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

解决float浮动定位时父元素的高度为0的情况 - 战友丨Crown - 未来的你，在未来等你。

 
我设置一个<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>

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

解决float浮动定位时父元素的高度为0的情况 - 战友丨Crown - 未来的你，在未来等你。

 

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

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

最终实现效果：

解决float浮动定位时父元素的高度为0的情况 - 战友丨Crown - 未来的你，在未来等你。