您的位置：首页 > Web前端 > CSS

css 清除浮动的新方法

2009-12-27 16:28 615 查看
起源： 

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
.clearfix { display: inline-table; } 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* End hide from IE-mac */

说明：

*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则：
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法： 

/* new clearfix */ 
.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成： 

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
.clearfix{*zoom:1;}

以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。



其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=gb2312" />
 <title>float clearing methods & CSS3 box-shadow and transforms</title>
 <style type="text/css">
  body {
   text-align: center;
  }
  
  h2 {
   clear: both;
   margin: 10px 0;
  }
 
  .group:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
  * html .group{ height:1%;} *:first-child+html .group{min-height:1px;}
 
  .stage {
   width: 220px;
   margin: 0 auto 20px;
   padding: 0 0 10px;
   background: yellow;
  }
  .col {
   float: left;
   width: 100px;
   height: 100px;
   border: 1px solid #000;
   background: red;
   -moz-box-shadow: 0 0 8px #00f;
   -webkit-box-shadow: 0 0 8px #00f;
   box-shadow: 0 0 8px #00f;
  }
  .col:hover {
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
  }
  
  .stage-right {
   float: right;
  }
  
  hr { clear:both; margin: 2em 0;}
 </style>
</head>
<body>
 <h1>Impact of float clearing methods on CSS3 box-shadow and transforms</h1>
 <a href="http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/">read the blog post</a>
 <h2>No Float Clearing Applied</h2>
 <div class="stage">
  <div class="stage-left col">
   
  </div>
  <div class="stage-right col">
   
  </div>
 </div>
 
 <hr />
 
 <h2>Clearfix Applied</h2>
 <div class="stage group">
  <div class="stage-left col">
   
  </div>
  <div class="stage-right col">
   
  </div>
 </div>
 
 <hr />
 
 <h2>Overflow: hidden; Applied</h2>
 <div class="stage" style="overflow: hidden;">
  <div class="stage-left col">
   
  </div>
  <div class="stage-right col">
   
  </div>
 </div>
 <hr />
 <h2>Overflow: auto; Applied</h2>
 <div class="stage" style="overflow: auto;">
  <div class="stage-left col">
   
  </div>
  <div class="stage-right col">
   
  </div>
 </div>
</body>
</html>

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。 

.group:after, 
#content:after, 
#sidebar:after, 
#some .other .thing:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
zoom:1; 
}

这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.

我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。

最后，关于为什么要采用一下这种复杂方式来针对IE6/7，而不采用其他稍微简洁的方式，还希望大家给我指点下迷津。 

* html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航