万能清除浮动样式

sanshao 2022年03月15日编程设计 169 0

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。
这个方法来源于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; 
}