html - Firefox 和 Chrome 的 css clearfix 行为不同

Question

我在计算宽度为 0，但内容宽度为 x 的 div 上将此类用于 css clearfix。

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

发生的事情是，在我使用此类之后，在 chrome 中，div 占据了其内容的宽度。 但在 firefox 中，div 占用其父级的宽度。

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

Answer 1

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

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