clearfix铲除起浮进化史

导语 我想咱们在写CSS的时分应该都对铲除起浮的用法深有体会,今日咱们就还谈论下clearfix的进化史吧。首先在许多许多年曾经咱们常用的铲除起浮是这样的。 clear{clear:both;line-height:0;}现在或许还能够在许多老的
博学谷

我想咱们在写CSS的时分应该都对铲除起浮的用法深有体会,今日咱们就还谈论下clearfix的进化史吧。

clearfix铲除起浮

首先在许多许多年曾经咱们常用的铲除起浮是这样的。


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

现在或许还能够在许多老的站点上能够看到这样的代码,适当暴力有用的处理起浮的问题。可是这个用法有一个致命伤,便是每次铲除起浮的时分都需求添加一个空标签来运用。

这种做法假如在页面杂乱的布局要常常清楚起浮的时分就会发生许多的空标签,添加了页面无用标签,不利于页面优化。可是我发现大型网站中 竟然还在运用这种清楚起浮的办法。有爱好的同学能够上他们主页查找一下他们的.blank0这个款式称号。

 

因而有许多大神就研讨出了 clearfix 铲除起浮的办法,直接处理了上面的缺点,不需求添加空标签,直接在有起浮的外层加上这个款式就能够了,这也是咱们今日要谈论的clearfix进化史。

来历


  1. .clearfix:after { 
  2.     visibilityhidden
  3.     displayblock
  4.     font-size0
  5.     content" "
  6.     clearboth
  7.     height0
  8. .clearfix { displayinline-table; } 
  9.  
  10. * html .clearfix { height1%; }//Hides from IE-mac 
  11. .clearfix { displayblock; }//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这条规范渐渐靠齐了。所以就有了下面这个写法呈现了。


  1. .clearfix:after { 
  2.     visibilityhidden
  3.     displayblock
  4.     font-size0
  5.     content" "
  6.     clearboth
  7.     height0
  8. * html .clearfix { zoom: 1; } /* IE6 */ 
  9. *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 

 

IE6 和 IE7 都不支撑 :after 这个伪类,因而需求后边两条来触发IE6/7的haslayout,以铲除起浮。走运的是IE8支撑 :after 伪类。因而只需求针对IE6/7的hack了。

在一个有float 特点元素的外层添加一个具有clearfix特点的div包裹,能够确保外部div的height,即铲除"起浮元素脱离了文档流,围住图片和文本的 div 不占有空间"的问题。

clearfix起浮


构成Block Formatting Context的办法有下面几种: 
    float的值不为none。 
    overflow的值不为visible。 
    display的值为table-cell, table-caption, inline-block中的任何一个。 
    position的值不为relative和static。 
很明显,float和position不合适咱们的需求。那只能从overflow或许display中选取一个。
 
由于是运用了.clearfix和.menu的菜单极有或许是多级的,所以overflow: hidden或overflow: auto也不满足需求
(会把下拉的菜单躲藏掉或许出滚动条),那么只能从display下手。 
咱们能够将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
可是display: inline-block会发生剩余空白,所以也排除去。
 
剩余的只要table-cell, table-caption,为了确保兼容能够用display: table来使.clearfix构成一个Block Formatting Context
由于display: table会发生一些匿名盒子,这些匿名盒子的其间一个(display值为table-cell)会构成Block Formatting Context。
这样咱们新的.clearfix就会闭合内部元素的起浮。 
 
后边又有人对此进行了改善:

Jeff Starr 在这里针对IE6/7用了两条句子来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 一起运用 zoom:1 或许直接就写成:

  1. .clearfix:after { 
  2.     visibilityhidden
  3.     displayblock
  4.     font-size0
  5.     content" "
  6.     clearboth
  7.     height0
  8. .clearfix{*zoom:1;} 

 

可是关于许多同学这种优化程度代码仍是不行给力,clearfix 开展到现在的两个终极版。

终极版一:

  1. .clearfix:after { 
  2.     content:"\200B"
  3.     display:block
  4.     height:0
  5.     clear:both
  6. .clearfix {*zoom:1;}/*IE/7/6*/ 
  7.  
解说下:content:"\200B";这个参数,Unicode字符里有一个“零宽度空格”,即 U+200B,替代本来的“.”,能够减缩代码量。并且不再运用visibility:hidden。

终极版二:


  1. .clearfix:before,.clearfix:after{ 
  2.     content:""
  3.     display:table; 
  4. .clearfix:after{clear:both;} 
  5. .clearfix{ 
  6.     *zoom:1;/*IE/7/6*/ 

 

这两个终极版代码都很简练,终极版一和二都能够运用,以上代码都通过测验,咱们赶忙用一下吧,假如有什么问题请及时跟我反应,假如你还停留在clearfix的老代码的时分就赶忙更新一下代码吧。

http://www.nucmc.com/ true clearfix铲除起浮进化史 http://www.nucmc.com/show-10-192-1.html report 5456.5 我想咱们在写CSS的时分应该都对铲除起浮的用法深有体会,今日咱们就还谈论下clearfix的进化史吧。首先在许多许多年曾经咱们常用的铲除起浮是这样的。 clear{clear:both;line-height:0;}现在或许还能够在许多老的
TAG:clearfix 进化史
本站欢迎任何方式的转载,但请有必要注明出处,尊重别人劳动成果
转载请注明: 文章转载自:BETWAY官网网 http://www.nucmc.com/show-10-192-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)