CSS clearfix的行为在firefox和chrome中不一样

Question

我正在使用这个类对一个div进行CSS清理，该div的计算宽度为0，但其内容宽度为x。

.clearfix {
 *zoom: 1;
 &:before,
 &:after {
   display: table;
   content: "";
 }
 &:after {
   clear: both;
 }
}

正在发生的事情是，在chrome后，我使用这个类，div采取其内容的宽度。但是在firefox中，div取其父元素的宽度。

在两种浏览器中，div不应该采用其内容的宽度吗?有什么问题吗?

Answer 1

如果它不影响你的其他样式，你可以使用overflow: hidden;强制容器展开浮动内容，等等

查看这个jsFiddle: http://jsfiddle.net/mBSCj/，它在所有主流浏览器中都可以工作。

Answer 2

还有一种不使用额外标记的方法可以清除浮点数。它比micro clearfix早了好几年。

http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}