您的位置：首页 > CSS, Tips > 万能清除浮动样式

万能清除浮动样式

发表于 14. Oct, 2008, 分类: CSS, Tips , 9 条评论 »
标签： & &

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。
这个方法来源于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框架中同时使用了这两种方法。

作者: admin
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

9 个评论

  • 网友 发表于Sep 7, 2009 at 15:21

    好强大

    回复
  • George 发表于Oct 1, 2009 at 07:32

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

    回复
    • 神采飞扬 发表于Oct 1, 2009 at 08:59

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

      回复
      • George 发表于Oct 6, 2009 at 22:09

        谢谢你的回答。

        回复
        • 小翼 发表于Sep 18, 2011 at 13:38

          无意中发现你的问题，这个根本就是因为margin相互叠加，再加上用了浮动所产生的问题，只要把样式改一下就行了。。代码如下：

          无标题文档

          *{
          margin: 0px;
          padding: 0px;
          }
          #div1{
          width: 290px;
          background-color: yellow;
          padding: 5px;
          overflow:hidden;
          zoom:1;
          }
          .div2{
          float: left;
          width: 150px;
          background-color: blue;
          height: 60px;
          margin-top: 5px;
          overflow:hidden;
          }

          div 2 float: left
          div 2 float: left
          div 2 float: left IE底边边界不能解析

          IE6就和所有的浏览器相同了

          回复
  • 若若 发表于Oct 21, 2009 at 10:27

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

    回复
  • vimest 发表于Mar 4, 2011 at 20:42

    自己是在父元素上面 overflow:auto;zoom:1; 前者解决除IE外的浏览器，后者帽触发了ie的haslayout，让元素能“知道”里面有元素从而包围起来。但在实际中，这样做，在某些情况下父元素有可能会出现滚动条。具体情况不得而知，但用来做demo还是不错的。

    回复
  • 小葱 发表于Sep 28, 2011 at 22:37

    感谢！无敌的清除浮动的样式

    回复
  • dws0706 发表于Dec 26, 2011 at 09:27

    ie6.0好像不支持，有没有能支持ie6.0的啊？

    回复

发表评论