Question

我在div上使用这个类用于css clearfix，它的计算宽度为0，但内容宽度为x。

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

在使用此类之后，正在发生的是 in chrome ，div获取其内容的宽度。 但在firefox 中，div占用其父级的宽度。

不应该是div在两个浏览器中占用其内容宽度的行为吗？可能是什么问题？

Answer 1

如果它不会干扰您的其他样式，您可以使用overflow: hidden;强制容器展开浮动内容等。

请参阅此jsFiddle：http://jsfiddle.net/mBSCj/，适用于所有主流浏览器。

Answer 2

还有一种方法可以在不使用额外标记的情况下清除浮动。它早于 micro clearfix 已经有好几年了。

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