首页 > 其他 > 详细

清除浮动

时间:2017-08-09 12:08:19      阅读:130      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{width:300px; border:1px solid #000;}
.f1{width: 50px;height:50px;background: gold;float: left;}
.f2{width: 50px;height:50px;background: blueviolet;float: left;}
</style>
</head>
<body>
<div class="container">
<div class="f1"></div>
<div class="f2"></div>
</div>
<div>浮动之后的元素</div>
</body>
</html>
运行效果如下:
技术分享
原因:container容器没有设置高度,由于container容器中的元素浮动,导致容器的高度为零
解决办法1:给容器设置高度 .container{height:60px}
解决办法2:给容器设置overflow属性 .container{overflow:hidden;}
解决办法3:给容器增加没有意义的空元素,设置其属性clear:both;
<div class="container">
<div class="f1"></div>
<div class="f2"></div>
<div style="clear: both"></div>
</div>
<div>浮动之后的元素</div>
解决办法4:利用css内容生成空元素,并且设置其display:block;(空元素必须是块级元素),clear:both;属性

.container:after{
content: "";
display: block;
clear: both;
}
第四种方案最好,最实用!!!
 
 
    
 
 

 

清除浮动

原文:http://www.cnblogs.com/longailong/p/7324163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!