清除浮动clearfix

更多2013/11/4 来源：css学习浏览量：11901

学习标签： css clearfix

本文导读：写css 时总为浮动而烦恼，如果用了浮动，浮动的父层不会跟着浮动框的高度增加而增加，在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。这个时候我们可以用clearfix清除浮动

什么是.clearfix

CSS 代码复制

{

content: " "; 清除浮动clearfix

display: block; 清除浮动clearfix

clear: both; 清除浮动clearfix

height: 0; 清除浮动clearfix

} {

zoom: 1;

}

<div class="clearfix"> 清除浮动clearfix

<div class="floated"></div> 清除浮动clearfix

</div>

上述代码说明：

CSS 代码复制

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

}

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

上面的代码就是.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>

/*所有主流浏览器都支持 :after 伪元素。*/ /*不知道有什么用处，不加ie7也没有问题*/ { background:#111;width:500px; position:relative;} {float:left; background:#333;width:200px; height:100px;} {float:right;background:#666;width:200px; height:200px;} {width:100px; height:100px;background:#999;position:absolute;right:-50px;;} 清除浮动clearfix

</style>

<div class="box clearfix"> 清除浮动clearfix

<div class="l">left</div> 清除浮动clearfix

<div class="r">right</div> 清除浮动clearfix

<div class="s">absolute</div> 清除浮动clearfix

</div>

</body>

</html>