clearfix铲除起浮进化史

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

clearfix铲除起浮

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

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

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

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

来历

• 对大多数契合规范的阅览器运用第一个声明块，意图是创立一个隐形的内容为空的块来为方针元素铲除起浮。
• 第二条为clearfix运用 inline-table 显现特点，只是针对IE/Mac。运用 * 对 IE/Mac 躲藏一些规矩：
• height:1% 用来触发 IE6 下的haslayout。

• 从头对 IE/Mac 外的IE运用 block 显现特点。

• 最终一行用于完毕针对 IE/Mac 的hack。（是不是觉得很坑爹，Mac下还有IE）

来历代码或许也是很前期的时分了，再往后Mac下的IE5也开展到IE6了，各种阅览器开端向W3C这条规范渐渐靠齐了。所以就有了下面这个写法呈现了。

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就会闭合内部元素的起浮。 

 

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

终极版一：

1. .clearfix:after { 
2.     content:"\200B"; 
3.     display:block; 
4.     height:0; 
5.     clear:both; 
6. } 
7. .clearfix {*zoom:1;}/*IE/7/6*/ 
8.  

终极版二：