有关.clearfix的一些事

一,什么是.clearfix

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	zoom: 1;
}
<div class="clearfix">
	<div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

  • 在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
  • 在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素内部插入一个clear: both的块级元素,从而达到清除浮动的作用。这时的代码相当于:
    <div>
    	<div class="floated"></div>
    	<div style="clear: both"></div>
    </div>

二,总结

在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多,大多数的情况下.clearfix:after都可以满足需求。除了.clearfix:after这种方式,其余的方法无非就是产生新的Block Formatting Context以达到目的……

有关.clearfix的一些事》上有3条评论

  1. dawenci

    clearfix的原理并非在应用了clearfix的元素后插入一个带清理属性的元素。而是在clearfix内部的所有元素完结后,追加一个清理浮动的元素进去。这点可以通过一个最简单的实验看到效果。嵌套效果应该如下:
    <div>
    <div class=’float’></div>
    <div style=’clear: both;’></div>
    </div>

  2. dawenci

    另外,重构后的clearfix是不合理的(重构前的clearfix是最完美的,那个长长的Demo分析有误)。
    display的属性值为table的情况,效果往往不能符合要求,你可以试试,被当作table渲染的盒子,其边框不会自动扩展,而会收缩到仅仅包含住里面的元素,这和IE下的表现不一致。当然,如果这个元素设定了固定宽度,那没问题。另外,渲染为table还会衍生一系列意外问题出来,相当让人抓狂。

发表评论