关于clearfix清除浮动

《关于clearfix清除浮动》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、起源：.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}.clearfix{display:inline-table;}/*HidesfromIE-mac*/*html.clearfix{height:1%;}.clearfix{display:block;}/*EndhidefromIE-mac*/说明：·*对大多数符合标准的浏览器应用第一个声明块，目的是创建

2、一个隐形的内容为空的块来为目标元素清除浮动。·*第二条为clearfix应用inline-table显示属性，仅仅针对IE/Mac。*利用*/对IE/Mac隐藏一些规则：·*height:1%用来触发IE6下的haslayout。·*重新对IE/Mac外的IE应用block显示属性。·*最后一行用于结束针对IE/Mac的hack。由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5），或正在靠近标准的路上，这个方法就不再那么与时俱进了。抛掉对IE/Mac的支持之后，新的清除浮动方法：/*ne

3、wclearfix*/.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，以清除浮动。幸运的是

4、IE8支持:after伪类。因此只需要针对IE6/7的hack了。糖伴西红柿说：JeffStarr在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用*来直接对IE6/7同时应用zoom:1或者直接就写成：.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}.clearfix{*zoom:1;}以我目前的浅薄认知来讲，以上写法应该也可以

5、直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。我平时都是用overflow:hidden来清除浮动的，因为够简单粗暴。但是overflow有时候也不太适用：父级元素使用overflow:hidden时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。对css3来说，也会overflow:hidden也会对一些属性产生影响。例如box-shadow,当父元素使用overflow:hidden属性时，box-shadow会被裁剪

6、。其他可能被影响的元素如text-shadow和transform。可以参考AndyFord的 demo对于那些不愿意再给标签添加额外的clearfix类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。.group:after,#content:after,#sidebar:after,#some.other.thing:after{visibility:hidden;display:block;font-size:0;content:"";clear:bot

7、h;height:0;zoom:1;}这种情况下，html和css文件就像一个跷跷板的两头。html代码倒是整洁了，css代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对zoom的遗忘。成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还

8、没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如jQuerymootoolsYUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。 本文转自：前端观察以下代码可以这么解释：.clearfix:after{<----在类名为“clearfix”的元素内最后面加入内容