清除修复HTML无法在Chrome中使用？

Question

我创建了this simple html：

这里有2个SPAN。

通过清除浮动，一个应该在另一个之下。

bbb元素有float:left

我使用（在aaa元素上），Facebook的“clearfix”CSS是：

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

 .clearfix { zoom: 1; }

这是一种有效的方式（如Facebook所做）和described here

然而它适用于FireFox :(见上图）

但是在Chrome（第24版）中却没有。

我错过了什么？

Answer 1

您的jsbin示例有两个拼写错误/语法错误，并且clearfix代码不正确。

1. <span class=" clearfix">您在clearfix
之前有空格
2. <span class='fll'>bbbbb </span>你有单引号而不是双引号。

将您的HTML更改为：

      <div class="clearfix">aaa </div>
      <div class="fll">bbbbb </div>

和你的CSS：

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

并且它有效（所有浏览器，包括IE6-7）http://jsbin.com/ukaxav/19/

Answer 2

.clearfix { display: block; }

这不是更“干净”吗？

Answer 3

将 display：inline-block; 属性添加到父div。

代码：

<div style="height: 100%; border: 1px solid blue;display: inline-block;"> 
<span class=" clearfix" style="">aaa </span>
<span class="fll">bbbbb </span>
</div>

Answer 4

Clearfix旨在清除浮动。意思是，在包含 float的元素上。 不是为了清除以前的浮动。所以在你的问题中，你没有把clearfix放在正确的位置，或者误解了原理。

Answer 5

在width: 100%;

中添加fll

所以，

.clearfix:before {
    content: "";
    display: table; }

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

.clearfix { zoom: 1; }

 .fll
{
    float:left;
    width: 100%;
}