1

これはばかげた質問かもしれませんが、CSSクリアの適切な使用について疑問があります。

このテンプレートがあります: http://onofri.org/example/WebTemplate/

適切なクリアを削除すると (firebug で試すことができます)、# footcontainer div の両方から、この div が上部に配置されていることがわかります (ほとんどヘッダーの下と 2 つの列の下にあるようです)。

私の考えでは、#content と #sidebar の 2 つの列が左にフロートされ、明確に設定されていないため、このことが発生します。# footcontainer div の両方で、ブラウザはこの div も#content * divの右側に配置しようとしますが、スペースがなく、上部に配置されます。

これは正しい直感ですか、それとも何か不足していますか?

TNX

アンドレア

4

4 に答える 4

1

これは、要素をフロートするたびに、そのコンテナーの自動高さが失われるために発生します。それを防ぎたい場合は、次のことができます。

コンテナに特定の高さを設定する

元：

<div class="my-container" style="height: 100px">
  <div style="float: left;">
    Some very interesting text right here.
  </div>
  <div style="float: left;">
    Don't read this and you'll be doomed.
  </div>
</div>

特定の高さを設定した場合、コンテンツがコンテナーより高くなっても div のサイズは変更されないことに注意してください。

style="clear: both"浮動要素の直後にdiv を追加します

元：

<div class="my-container">
    <div style="float: left;">
      Some very interesting text right here.
    </div>
    <div style="float: left;">
      Don't read this and you'll be doomed.
    </div>
    <div style="clear:both"></div>
  </div>

ええ、それは動作します。しかし、そんなことをするのは初心者だけです。それはエレガントではなく、コードを汚染します。

overflow: hidden親コンテナに設定

<div class="my-container" style="overflow: hidden">
    <div style="float: left;">
      Some very interesting text right here.
    </div>
    <div style="float: left;">
      Don't read this and  you'll be doomed.
    </div>
  </div>

これは素晴らしいですが、たとえば、絶対に配置されたものを親 div の外に移動する必要がある場合は危険です。あなたは不愉快な驚きを感じるでしょう。

ClearFix ハックを使用します。

これが私のやり方です。実装が簡単で、魅力のように機能します。このリンクをチェックしてください: http://www.positioniseeverything.net/easyclearing.html ;

(私のように) 有効な CSS がないことを気にする場合は、たとえば、別のスタイルシートと条件付きコメントを使用して IE ブラウザーをターゲットにすることができます。

この件に関するその他のリソース:

于 2013-07-10T13:39:40.110 に答える
0

コンテナに高さが設定されていません。コンテナの高さをそのコンテンツの高さ (この場合は 596 ピクセル) に変更すると、フッターの両方のプロパティをクリアすると、1 イオタ移動しません。

于 2013-07-10T12:24:08.177 に答える
-1

オブジェクトをフロートさせると、それに応じて親オブジェクトのサイズが変更されないためだと思います。

たとえば、次の場合:

<div class="1px-border">
    <div class="float">
            <h3>TEST</h3>
    </div>
</div>

境界線は完全にフラットになり、ヘッダーに合わせてサイズ変更されません。コンテナ div に overflow: auto を設定することで修正できます。

そうは言っても、私は大幅に間違っている可能性があります。

于 2013-07-10T12:14:15.947 に答える