【推荐】万能清除浮动样式
2012-05-16 13:46 臭小子1983 阅读(273) 评论(1) 编辑 收藏 举报这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。
01 |
<style type= "text/css" > |
02 |
.clearfix:after { |
03 |
content : "." ; |
04 |
display : block ; |
05 |
height : 0 ; |
06 |
clear : both ; |
07 |
visibility : hidden ; |
08 |
} |
09 |
.clearfix { display : inline- block ;} /* for IE/Mac */ |
10 |
11 |
</style> |
12 |
<!-- main stylesheet ends, CC with new stylesheet below ... --> |
13 |
14 |
<!--[if IE]> |
15 |
<style type= "text/css" > |
16 |
.clearfix { |
17 |
zoom: 1 ; /* triggers hasLayout */ |
18 |
display : block ; /* resets display for IE/Win */ |
19 |
} |
20 |
/* Only IE can see inside the conditional comment |
21 |
and read this CSS rule. Don't ever use a normal HTML |
22 |
comment inside the CC or it will close prematurely. */ |
23 |
</style> |
24 |
<![endif]--> |
Update @ 2008.11.12
刚刚看到一篇日志说这个问题,受到了点启发:
1 |
.clearfix:after { |
2 |
content : "020" ; |
3 |
display : block ; |
4 |
height : 0 ; |
5 |
clear : both ; |
6 |
} |
7 |
.clearfix { |
8 |
zoom: 1 ; |
9 |
} |
这个是优化版的清除浮动的样式,很值得推荐。
另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。
01 |
html body div.clear, |
02 |
html body span.clear |
03 |
{ |
04 |
background : none ; |
05 |
border : 0 ; |
06 |
clear : both ; |
07 |
display : block ; |
08 |
float : none ; |
09 |
font-size : 0 ; |
10 |
margin : 0 ; |
11 |
padding : 0 ; |
12 |
overflow : hidden ; |
13 |
visibility : hidden ; |
14 |
width : 0 ; |
15 |
height : 0 ; |
16 |
} |
这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。
这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。