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。不需要额外的标记就可以清除。

FireFox忽略了伪元素

1 个答案: