clearfix清除浮动进化史

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 */
:first-child+html .clearfix { zoom: 1; } / IE7 */
复制代码
IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹，可以保证外部div的height，即清除"浮动元素脱离了文档流，包围图片和文本的 div 不占据空间"的问题。

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;}
复制代码
但是对于很多同学这种优化程度代码还是不够给力，clearfix 发展到现在的两个终极版。

重构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: 也不满足需求

（会把下拉的菜单隐藏掉或者出滚动条），那么只能从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:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/IE/7/6/
复制代码
解释下:content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。

终极版二：

复制代码
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/IE/7/6/
}
深圳网站建设www.sz886.com

clearfix清除浮动进化史相关推荐

php里清除浮动代码,CSS中使用clearfix清除浮动的方法
首先在很多很多年以前我们常用的清除浮动是这样的. CSS Code复制内容到剪贴板 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码 ...
css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
clearfix清除浮动
在开发html页面时,我们经常会用到css的清除浮动,这里我推荐一种版本的清除方法,个人感觉非常好用. .clearfix:before,.clearfix:after{content:"& ...
css之使用clearfix类清除浮动
首先,copy下bootstrap里面的写法: .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; ...
清除浮动的最佳方案：clearfix
CSS清除浮动float闭合,很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;} 或者 .clear{clear:both;height:0;overflow:hidden ...
Clearing Floats清除浮动--clearfix的不同方法的使用概述
清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在"clearfix methods"越来越被大家熟知.在深入剖析"cle ...
重温清除浮动方法，逐句解释clearfix的意义
最近重温了CSS相关的一些内容,很多当时不理解的内容,到现在逐渐理解了一些. 干脆对清除浮动的方法做一个总结,便于自己今后遗忘再寻找,在这里也提供一个参考. 目录为何要清除浮动本质与策略清除浮动 ...
css清除浮动（clearfix）的3种方式
一.背景 css中使用了float浮动元素,导致页面中某些元素不能正确的显示. 二.浮动引起的后果 (1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素. (2)与浮动 ...
前端面试题-clearfix（清除浮动）
一.浮动的概念浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. ...

clearfix清除浮动进化史

clearfix清除浮动进化史相关推荐

最新文章

热门文章