万能清除浮动样式

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。

<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */
 
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
 
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1;     /* triggers hasLayout */
<span style="color: #aa0000;">display: block;     /* resets display for IE/Win */</span>
}  /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

Update @ 2008.11.12

刚刚看到一篇日志说这个问题,受到了点启发:

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

这个是优化版的清除浮动的样式,很值得推荐。

另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

VN:F [1.9.3_1094]
Rating: 8.6/10 (12 votes cast)
万能清除浮动样式, 8.6 out of 10 based on 12 ratings
如果你喜欢本文,欢迎 订阅本站 以获得本站最新内容。

5 个评论

  • 好强大

  • 无意中发现博主博客,很受用.
    谢谢你的辛勤劳动
    此前我在csdn上发过一帖.希望博主能看看是否有解决方案. 关于浮动闭合.在不使用HACK和添加html 无意空元素为前提.解决IE不支持子元素底边界值.
    地址是http://topic.csdn.net/u/20090928/16/64b7247c-3fe0-4d7f-9284-ee01f73840f6.html?53069

    • 简单的看了一下你说的那种情况,如果里面的div2不使用浮动,IE6是可以认出边界的,但是既然div2使用了浮动,那就需要使用清除浮动的方法,不使用hack和额外的html,难~~

  • 恩,感谢博主,博客很实用,收藏了

发表评论