首页 > 代码库 > css清除浮动之常用的5种方法
css清除浮动之常用的5种方法
css关于清除浮动
本文参考了博客http://www.jb51.net/css/173023.html后经过本人的实践总结除了下面几种清除浮动的最常用的方法。
.div1 {
background-color: #00c;
}
.left {
float:left;
width: 200px;
height:200px;
background-color: #0c0;
}
.right {
float:right;
width: 200px;
height:200px;
background-color: #0f0;
}
.div2 {
height:100px;
background-color: #ffc;
}
<div class="div1">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="div2">div2</div>
首先要说说浮动:如上所示代码,div1里有两个小的div,这两个div分别设置左浮动和右浮动,这样显示出来肯定会对下一个div块造成影响。
然后说明浮动带来的问题:
- 1.会使当前标签产生上浮效果,影响前后标签,父级标签的位置。
-
2.浮动存在浏览器兼容等问题
要清除div1里浮动的影响,有常用的5种方法:
-
1.推荐使用的方法:父级div1定义 伪类:after和zoom: 给div1加个clearfloat的类。
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat { zoom:1} -
2.给父级div1定义 height:就是给div1块加个height: 200px;
. 注意,height高度的值要大于div1里子元素的任何一个高度。所以这种方法的缺点就是:只适合高度固定的布局,要给出精确的高度。 - 3.结尾处加空div标签 clear:both:在right块的下面加个空div:
<div class="clearfloat"></div>
,并且要设置.clearfloat {clear:both}
。缺点就是如果页面浮动布局多,就要增加很多空的div,对页面不友好。 - 4.父级div定义 overflow: hidden:需要对div1定义一个width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 。缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
- 5.父级div定义 overflow:auto :同上,需要对div1定义一个width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 。缺点:内部宽高超过父级div时,会出现滚动条。
css清除浮动之常用的5种方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。