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では機能します:(上の写真を見てください）

しかし、クローム（v 24）ではそうではありません。

ここに画像の説明を入力してください

私は何が欠けていますか？

4

5 に答える 5

1

jsbinの例には2つのタイプミス/構文エラーがあり、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

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-12T14:22:33.440 に答える
0

Clearfixは、フロートをクリアすることを目的としています。つまり、floatを含む要素です。以前のフロートをクリアするためではありません。したがって、あなたの質問では、クリアフィックスを正しい場所に配置していないか、原則を誤解しています。

于 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 に答える