Firefox 和 chrome 的 css clearfix 行为不一样答案

【问题标题】：css clearfix behavior not the same for firefox and chromeFirefox 和 chrome 的 css clearfix 行为不一样
【发布时间】：2013-03-23 22:15:44
【问题描述】：

我在一个 div 上使用这个类进行 css clearfix，它的计算宽度为 0，但其中包含宽度 x 的内容。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：