314

次の CSS ルールは何をしますか:

.clear { clear: both; }

そして、なぜそれを使用する必要があるのでしょうか?

4

5 に答える 5

698

ここではフロートがどのように機能するかを（詳細に）説明しません.clear: both;clear: both;

私はこの答えを簡単に、そしてポイントに保ち、なぜclear: both;必要なのか、それが何をするのかをグラフィカルに説明します...

一般に、デザイナーは要素を左また​​は右にフロートさせます。これにより、反対側に空のスペースが作成され、他の要素が残りのスペースを占めることができます。

なぜそれらは要素をフロートさせるのですか?

デザイナーが 2 つのブロック レベルの要素を並べて必要とする場合、要素はフローティングされます。たとえば、以下のようなレイアウトの基本的な Web サイトをデザインしたいとします...

ここに画像の説明を入力

デモ画像のライブ例。

デモ用コード

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}
<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

注: 要素がブロック レベルの要素であることを明示的に示すために、スタイルシートのように、、、、(およびその他の HTML5 要素)を追加する必要がある場合があります。headerfooterasidesectiondisplay: block;

説明：

基本的なレイアウト、ヘッダー 1 つ、サイド バー 1 つ、コンテンツ エリア 1 つ、フッター 1 つがあります。

のフロートはありませんheader。次に、Web サイトのサイドバーに使用するタグが来るasideので、要素を左にフロートします。

注: デフォルトでは、ブロック レベル要素はドキュメントの 100% 幅を占めますが、左右にフロートすると、保持するコンテンツに応じてサイズが変更されます。

  1. ブロック レベル要素の通常の動作
  2. ブロック レベル要素のフローティング動作

お気づきのように、左のフロートdivは右のスペースを未使用のままにします。これによりdiv、残りのスペースにシフトすることができます。

  1. divフロートされていない場合、 は次々にレンダリングされます
  2. div左または右に浮かせた場合、互いに横に移動します

では、ブロック レベルの要素が左または右にフロートしたときの動作は次clear: both;のとおりです。

したがって、レイアウトのデモに注意してください-忘れた場合は、ここにあります..

と呼ばれるクラスを使用しており、値が である.clearと呼ばれるプロパティを保持しています。では、なぜ が必要なのか見てみましょう。clearbothboth

私は浮いた要素asideをsection左側に持ってきたので、シナリオを想定してみましょう。プールがあり、どこheaderに固体の土地がasideありsection、プールに浮いていて、フッターが再び固体の土地である、このような..

フローティング ビュー

そのため、青い水は、フローティング要素の領域が何であるかを認識していません。それらはプールよりも大きい場合も小さい場合もあります。そのため、CSS 初心者の 90% を悩ませる共通の問題が発生します: コンテナ要素の背景が引き伸ばされないのはなぜですか?浮動要素を保持する場合。これは、ここではコンテナー要素がPOOLであり、 POOLは浮動しているオブジェクトの数や、浮動要素の長さや幅がわからないため、単純に引き伸ばされないためです。

  1. ドキュメントの通常の流れ
  2. セクションを左にフロート
  3. コンテナーの背景色を引き伸ばすためにフローティング要素をクリアしました

（これを行うためのきちんとした方法については、この回答の[Clearfix]divセクションを参照してください。説明のために意図的に空の例を使用しています）

上記で 3 つの例を示しました。1 つ目はred、コンテナーがフローティング オブジェクトを保持しないため、背景が期待どおりにレンダリングされる通常のドキュメント フローです。

2 番目の例では、オブジェクトが左にフロートされている場合、コンテナ要素 (POOL) はフロート要素のサイズを認識しないため、フロート要素の高さまで引き伸ばされません。

ここに画像の説明を入力

を使用した後clear: both;、コンテナー要素は浮動要素の寸法に引き伸ばされます。

ここに画像の説明を入力

が使用されるもう 1 つの理由はclear: both;、要素が残りのスペースで上に移動するのを防ぐためです。

たとえば、2 つの要素を並べて配置し、その下に別の要素を配置するとします。つまり、2 つの要素を左にフロートさせ、その下にもう 1 つの要素を配置します。

  1. div左に浮いた結果、section残りのスペースに移動しました
  2. タグがフロートs の下にレンダリングされるように、フロートがクリアdivされました。sectiondiv

1例目

ここに画像の説明を入力

2番目の例

ここに画像の説明を入力

最後になりましたが、タグを宣言する前にクラスfooterを使用したため、フロート要素の後にタグがレンダリングされます。これにより、すべてのフロート要素 (左/右) がその時点まで確実にクリアされます。clearfooter

クリアフィックス

フロートに関連する clearfix に来ています。@Elkyですでに指定されているように、これらのフロートをクリアする方法はdiv、要素ではない空の要素を使用しているため、クリーンな方法ではありませんdiv。したがって、ここにclearfixがあります。

親要素が終了する前に空の要素を作成する仮想要素と考えてください。これにより、浮動要素を保持しているラッパー要素が自動的にクリアされます。この要素は文字通りDOMには存在しませんが、機能します。

フローティング要素を持つラッパー要素をセルフクリアするには、次を使用できます

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

:afterそのために私が使用した疑似要素に注意してくださいclass。これにより、ラッパー要素が閉じる直前に、ラッパー要素の仮想要素が作成されます。dom を見ると、ドキュメント ツリーにどのように表示されるかがわかります。

クリアフィックス

ご覧のとおり、フロートされた子の後にレンダリングされ、ここでフロートをクリアします。これは、これにも使用しているプロパティを持つ空の要素をdiv持つことと同等です。なぜとはこの回答の範囲外ですが、ここで疑似要素の詳細を学ぶことができます。divclear: both;display: table;content

IE8 はpseudoをサポートして:afterいるため、これは IE8 でも機能することに注意してください。

元の回答:

ほとんどの開発者は、コンテンツをページの左または右にフロートさせます。おそらくロゴ、サイドバー、コンテンツなどを保持する div です。これらの div は左または右にフロートされ、残りのスペースは未使用のままになります。したがって、他のコンテナを配置すると、残りのスペースにもフロートがあるため、それが使用されるのを防ぐために、clear: both;左または右にフロートされているすべての要素をクリアします。

デモンストレーション：

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

ここで、他の div render below を作成したい場合はどうすればよいのでdiv1、これを使用clear: both;して、左または右のすべてのフロートを確実にクリアします。

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
于 2012-10-13T09:20:48.083 に答える
23

CSS フロートとクリア

サンプルフィドル

withclear:bothからプロパティを削除して、 float に従う方法を確認してください。divclass sampledivs

于 2012-10-13T09:26:31.720 に答える
2

1 つの要素を他の要素の下に配置する場合は、CSS でこのコードを使用します。浮き輪に使用しています。

コンテンツをフロートする場合、左または右にフロートできます。したがって、一般的なレイアウトでは、左ナビゲーション、コンテンツ div、およびフッターがある場合があります。

フッターがこれらのフロートの両方の下に留まるようにするには (左右にフロートしている場合)、フッターを として配置しclear: bothます。

このようにして、両方のフロートの下に留まります。

(左のみをクリアする場合は、本当に必要なだけですclear: left;。)

このチュートリアルを実行します。

于 2012-10-13T09:18:58.993 に答える