清除解決方案HTML無法在Chrome中使用？

我創建了this simple html：清除解決方案HTML無法在Chrome中使用？

這裏有2個SPAN。

一個應該在另一個之下通過清除浮動。

enter image description here

的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; }

這是一個有效的方式（如臉書做）和described here

但它在F ireFox：（看上面的圖片）

但是在鉻（v 24）它沒有。

enter image description here

我缺少什麼？

來源

2013-02-12 Royi Namir

貌似鉻錯誤。 '。clearfix：在{display：block}之後，有些內容應該和'.clearfix'範圍內的末尾有一個真正的div一樣。但事實並非如此。 – Alohci 2013-02-12 14:41:27

@downoter，解釋很有幫助！ – 2013-02-12 14:43:40

我只是看看Facebook的代碼。他們似乎只在塊級內容上使用這個類。您的第一個跨度是內聯內容AFAICT。 – wds 2013-02-12 16:04:58

你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/

來源

2013-02-12 14:36:44

仍然有你在第二個跨度的單引號 – Vinay 2013-02-12 14:38:11

是的抱歉..太多的錯誤糾正與此代碼 – 2013-02-12 14:39:21

什麼？ 'class =「clearfix」'是有效的。並且'''是有效的。 – 2013-02-12 14:39:34

.clearfix { display: block; }

難道這不是一點「更乾淨？

來源

2013-02-12 14:21:31

顯示塊之間存在差異並清除兩者。我的問題是關於清理浮游物。 – 2013-02-12 14:25:26

提供一個非常有說服力的jsfiddle，我們可以開展工作。在你的小提琴中，一個簡單的「顯示：塊」就足夠了。 – 2013-02-12 14:26:44

在這裏。 http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/看看這個部分是通過CSS_ – 2013-02-12 14:28:46

add 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>

來源

2013-02-12 14:22:33 Aratidgr8

這導致包裝div的行爲不像預期的那樣。 div應該默認爲100％。 – 2013-02-12 14:23:53

您需要添加寬度：100％;父母的div。 – Aratidgr8 2013-02-12 14:54:46

div默認爲100％...... – 2013-02-12 14:56:56

Clearfix旨在清除浮動。意思是，在一個元素上，包含浮點數。不適用於清除以前的浮標。因此，在您的問題中，您沒有將clearfix放在正確的地方，或者誤解了原理。

來源

2013-02-12 14:25:37 Mark

我正在清理浮游物。這是psuedo課後正在做的事情。再看看代碼。 – 2013-02-12 14:26:30

在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%; 
}

來源

2013-02-12 14:31:24 Vinay

addint 100％是另一種解決方案。但是你可以刪除這個clearfix。我的問題是爲什麼清除修復不起作用。 – 2013-02-12 14:32:09

在這裏http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/你可以看到它是另一種解決方案，但我想使用clearfix。 – 2013-02-12 14:32:39

清除解決方案HTML無法在Chrome中使用？

回答

相關問題