首页 > 代码库 > 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种方法