2

我创建了这个简单的 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 所做的那样），并且如此处所述

但是它在 FireFox 中有效：（看上图）

但在 chrome (v 24) 中却没有。

在此处输入图像描述

我错过了什么？

4

5 回答 5

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/

于 2013-02-12T14:36:44.077 回答
0 
.clearfix { display: block; }

不是更“干净一点”吗？

于 2013-02-12T14:21:31.650 回答
0

添加显示：内联块；属性到父 div。

代码：

<div style="height: 100%; border: 1px solid blue;display: inline-block;"> 
<span class=" clearfix" style="">aaa </span>
<span class="fll">bbbbb </span>
</div>
于 2013-02-12T14:22:33.440 回答
0

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

于 2013-02-12T14:25:37.047 回答
0

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%;
}
于 2013-02-12T14:31:24.527 回答