clearfix清除浮动是怎样演变的

来源: WEB开发者时间:2017-03-10

  我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧。

  .clear{clear:both;line-height:0;}

  首先在很多很多年以前我们常用的清除浮动是这样的。

  现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。

  这种做法如果在页面复杂的布局要经常清除浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还在使用这种清除浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。

  因此有很多大神就研究出了 clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。

  起源

  .clearfix:after {

  visibility: hidden;

  display: block;

  font-size: 0;

  content: " ";

  clear: both;

  height: 0;

  }

  .clearfix { display: inline-table; }

  * html .clearfix { height: 1%; }//Hides from IE-mac

  .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下还有IE)

  起源代码可能也是很早期的时候了,再往后Mac下的IE5也发展到IE6了,各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。

  .clearfix:after {

  visibility: hidden;

  display: block;

  font-size: 0;

  content: " ";

  clear: both;

  height: 0;

  }

  * html .clearfix { zoom: 1; } /* IE6 */

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

发表评论

最新评论(共0条)