css用clearfix清除浮动

时间：2013-11-4类别：Web前端

css用clearfix清除浮动

css用clearfix清除浮动

什么是.clearfix

CSS 代码复制


.clearfix:after {...}{
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {...}{
  zoom: 1;
}

<li class="clearfix">
  <li class="floated"></li>
</li>

上述代码说明：

CSS 代码复制


.clearfix:after {...}{       
    content: ".";     /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /**//*加入的这个元素转换为块级元素。*/
    clear: both;     /**//*清除左右两边浮动。*/
    visibility: hidden;      /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
    line-height: 0;    /**//*行高为0；*/
    height: 0;     /**//*高度为0；*/
    font-size:0;    /**//*字体大小为0；*/
}

.clearfix {...}{ *zoom:1;}   /**//*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。

实例：

HTML 代码复制



<html > 
<head> 
<title> css用clearfix清除浮动实例</title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
</head> 
<body> 
<style type="text/css">... 
/**//*所有主流浏览器都支持 :after 伪元素。*/ 
.clearfix:after{...}{content:".";display:block;height:0;clear:both;visibility:hidden} 
.clearfix{...}{*+height:1%;}/**//*不知道有什么用处，不加ie7也没有问题*/ 
.box{...}{ background:#111;width:500px; position:relative;} 
.l{...}{float:left; background:#333;width:200px; height:100px;} 
.r{...}{float:right;background:#666;width:200px; height:200px;} 
.s{...}{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 
</style> 
<li class="box clearfix"> 
<li class="l">left</li> 
<li class="r">right</li> 
<li class="s">absolute</li> 
</li> 
</body> 
</html>

标签：

css clearfix

css用clearfix清除浮动

css用clearfix清除浮动

猜您喜欢

热门推荐