.clear{clear:both;line-height:0;}
做网页排版时，我们常常要用到浮动这招，比如搞多栏布局或者图文混排什么的。不过，有次我发现我把所有子元素设成浮动以后，爸爸（这里指父元素）高度居然无法涨起来，变成塌陷了，真是让人烦心！这时候，懂得清除浮动就显得很重要了。记得以前最原始的办法就是在最后一个子元素后面加个空标签，再给它加上clear属性，这样就能清掉浮动。虽说这个法子帮助父元素恢复身高了，但也让页面里出现好多没用的空白标签，影响网页速度和美观度。
clearfix的诞生
别再用那些老套的清除浮动法了！现在有个新办法叫clearfix，只要简单地给包裹着要清理浮空的元素的父亲容器贴上clearfix类名就能搞定，省去了加空白标签的麻烦。这个方式实在是太实用，已经被广大开发者成功运用到他们的项目中去了。大部分主流浏览器都会自动加上一些样式，弄出一块什么都没有的透明块把需要清理的元素“压”下去。不过对于那些古老的IE / Mac浏览器，还得额外添加一下 inline-table 这个属性才行。
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
随着互联网科技的飞速进步，网页设计也在不断变化。那个时候，为了让早期IE/Mac和其他网页浏览器能正常运行，我们会在样式表里用*选择符藏起一部分规则，然后再特意去修正其他版本IE的block显示属性。后来IE6和IE7由于不支持:after伪类，于是就出现了专门为它们编写的hack code片段。
clearfix优化与终极版本
虽然clearfix基本能搞定排版浮动的问题，但遇到一些特殊情况还是得再调整一下。比如，页面布局比较乱或者有好几层子菜单的话，光靠overflow:hidden或auto来隐藏父元素滚动条就不太靠谱儿，下拉菜单很容易被藏起来或者出现不想要的滚动条。这个时候，我们可以换个法子，就是把clearfix里面的display属性的值改成table-cell、table-caption之类的，这样就能创建出一个Block Formatting Context（BFC），然后问题就能迎刃而解！
终极版本代码解析
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
现在的clearfix代码真的是简单明了，而且经得起考验，非常稳定且兼容各种浏览器！设置个display: table什么的就构成了BFC（盒模型边界框），轻松搞定内部元素飘移，还能用”u200B”这个神秘的参数，又叫”零宽度空格”，给代码减肥瘦身！
如何选择适合自己项目的clearfix方法
在项目里头，挑个适合你需求、还能跟浏览器兼容的 Clearfix 方法很关键。如果项目比较简单、只需要处理现代浏览器的话，就挑最新版那种简洁有效的Clearfix代码使用吧；但要是要兼顾兼容或其他特殊情况的布局，那就得选以前的版本或者自己订制对应的样式来搞定。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
结语
总之，随着Web前端技术越来越强大，我们平时用的css清理浮动的办法也越来越方便了。从以前需要使劲加空标签，到现在直接用clearfix代码就搞定，而且还更稳定呢～每次新的改进都是为了让前端开发变得简单和快速。所以，大家在实际工作中可以根据自己的情况来选自己觉得好用的方法，同时也要不断学习新东西，这样才能一起推动Web技术的进步。
评论0