清除修复 HTML 在 chrome 中不起作用？答案

【问题标题】：Clear fix HTML is not working in chrome?清除修复 HTML 在 chrome 中不起作用？
【发布时间】：2013-02-12 23:09:11
【问题描述】：

这里有 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 (v 24) 中却没有。

我错过了什么？

【问题讨论】：

看起来像一个 chrome 错误。 .clearfix:after { display:block } 包含一些内容应该与在 .clearfix 跨度内部的末尾有一个真正的 div 做同样的事情。但事实并非如此。
@downoter ，解释很有帮助！
我刚刚查看了 facebook 的代码。他们似乎只在块级内容上使用这个类。您的第一个跨度是内联内容 AFAICT。
@wds 是的，但话又说回来，为什么要清除自动转到新行的 div 块。
@RoyiNamir 我相信在大多数设计中，它是为了阻止不同的块相互渗透。

标签： html css css-float

【解决方案1】：

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

<span class=" clearfix"> clearfix 前有空格
<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/

【讨论】：

第二个跨度仍然有单引号
“不工作”是什么意思？这是想要的结果。 aaa 先显示，换行 bbbbb
+1。现在正在工作。供您参考，该类的空格没有任何问题，它也可以用作'。问题出在实际的班级规则上。（Facebook 的做法不正确吗？）
Royi，我想 HTML 是宽容的，但如果我是你，我不会尝试去发现不同的浏览器如何解释 HMTL 中的随机空格或单引号......这可能是你得到奇怪的结果尤其是不太现代的。
关于我多年来使用的 clearfix 方法，perishablepress.com/new-clearfix-hack 是坚如磐石的。（在我工作的地方，我们必须支持 IE7..）

【解决方案2】：

.clearfix { display: block; }

不是更“干净一点”吗？

【讨论】：

显示块和清除两者是有区别的。我的问题是关于清除浮动。
提供一个详尽的 jsfiddle，我们可以处理它。在你的小提琴中，一个简单的“显示：块”就足够了。
这里。 robertnyman.com/2007/04/12/… 看看这个部分是 Generating Content Through CSS
我做了一些测试，似乎 Chrome 添加了与生成它的元素相同的显示属性。使用 !important 问题并没有解决。但是，如果您将“显示：块”设置为您的跨度，那么 CSS 生成的元素也将具有块状态。（不是解决方案，但这是我发现的）

【解决方案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>

【讨论】：

这导致包装器 div 的行为与预期不符。 div 默认为 100%。
你需要添加宽度：100%；到父 div。
作为块元素的 div 默认占其父容器的 100% 宽度，但在您的情况下，主 div 有父元素，所以我将 div 宽度指定为 100%。

【解决方案4】：

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

【讨论】：

我正在清理花车。这就是 after psuedo 类正在做的事情。再看代码。

【解决方案5】：

在您的fll 中添加width: 100%;

所以，

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

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

.clearfix { zoom: 1; }

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

【讨论】：

addint 100% 是另一种解决方案。但是您可以删除clearfix。我的问题是为什么清除修复不起作用。
在这里robertnyman.com/2007/04/12/… 你可以看到这是另一种解决方案，但我想使用 clearfix。