FireFox 忽略的伪元素

Question

女士们先生们，

很长一段时间以来，我一直在使用以下 CSS 技术通过清除来打破浮动：

{
    display: block;
    content: ".";
    clear: both;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
}

然后我会将这组规则分配给 :before 或 :after 伪元素（或者，现在，似乎是 ::before 和 ::after，尽管它们应该回退到底漆）。从逻辑上讲，这与在元素之前或之后创建块元素完全相同，具有clear:both、overflow:hidden 并且对浏览器没有特殊的语义含义。

这让我可以打破浮动，而不会在代码中放入误导性/模棱两可和冗长的 HTML 元素（如 <div class="clear"></div>），但仍然让我的未浮动父级容纳所有浮动的子级。但是，这似乎不再适用于 FireFox 的许多情况。问题：为什么..？

似乎也没有办法检查侧边栏中的这些伪元素以了解实际情况。

感谢和问候

Answer 1

使用这个：

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

它是跨浏览器并且有效。

例子：

<div class="clearfix">
   <div style="float:left;">1</div>
   <div style="float:left;">2</div>
   <div style="float:left;">3</div>
   <div style="float:left;">4</div>
</div>

添加了style="float:left;" 以显示它们是浮动的，但不要使用内联 CSS。 不需要额外的标记来清除。