html - Firefox 和 chrome 的 css clearfix 行为不一样

Question

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

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

2 回答 2