次のCSSルールは何をしますか：
.clear { clear: both; }そして、なぜそれを使用する必要があるのですか？
回答:
ここではフロートがどのように機能するか（詳細）は説明しません。この質問は一般になぜ使用するのか、または正確に何をするのかに焦点を当てているためです...clear: both;clear: both;
私はこの答えを単純に、要点を守り、なぜclear: both;必要なのか、それが何をするのかをグラフィカルに説明します...
通常、設計者は要素を左または右にフロートします。これにより、反対側に空のスペースが作成され、他の要素が残りのスペースを占有できるようになります。
設計者が2つのブロックレベルの要素を並べて必要とする場合、要素はフローティングされます。たとえば、次のようなレイアウトの基本的なWebサイトをデザインしたいとします...
デモ画像のライブ例。
デモ用のコード
注： あなたが追加する必要がありますheader、footer、aside、section（およびその他のHTML5要素）としてdisplay: block;明示的要素はブロックレベル要素であることを言及するために、あなたのスタイルシートインチ
基本的なレイアウト、1つのヘッダー、1つのサイドバー、1つのコンテンツ領域、1つのフッターがあります。
のフロートはありませんheader。次にaside、ウェブサイトのサイドバーに使用するタグが来るので、要素を左にフロートします。
注：デフォルトでは、ブロックレベル要素はドキュメントを100％幅で占有しますが、左または右にフロートすると、保持するコンテンツに応じてサイズが変更されます。
あなたが気づくように、左に浮かぶとdiv、スペースは未使用の右divに残されます。これにより、後が残りのスペースにシフトすることができます。
わかりました。これが、左または右にフロートしたときのブロックレベルの要素の動作clear: both;です。ここで、なぜ必要で、なぜですか。
レイアウトデモでメモした場合-忘れた場合に備えて、ここにあります。
と呼ばれるクラスを使用して.clearいますが、それはclearの値で呼び出されるプロパティを保持していますboth。なぜそれが必要なのか見てみましょうboth。
私はフロートしaside、section要素を左に移動したので、プールがあり、headerソリッドランドがasideありsection、フッターが再びソリッドランドであるシナリオを想定します。このようなものです。
だから青い水は浮かぶ要素の面積が何であるかを理解していません、それらはプールよりも大きいか小さいかもしれません、それでここにCSS初心者の90％を悩ます一般的な問題があります：なぜコンテナ要素の背景が引き伸ばされないのですか？浮遊要素を保持している場合。これは、コンテナー要素がここではPOOLであり、POOLが浮動しているオブジェクトの数、または浮動要素の長さまたは幅が何であるかがわからないため、単に伸縮しないためです。
（これを正しく行う方法については、この回答の[Clearfix]セクションを参照してください。div説明のために空の例を意図的に使用しています）
上記の3つの例を示しました。1つ目は通常のドキュメントフローでred、コンテナはフローティングオブジェクトを保持していないため、背景は期待どおりにレンダリングされます。
2番目の例では、オブジェクトが左にフロートされると、コンテナー要素（POOL）はフロート要素の寸法を認識しないため、フロート要素の高さまで伸びません。
を使用した後clear: both;、コンテナ要素は浮動要素の寸法に引き伸ばされます。
clear: both;が使用されるもう1つの理由は、要素が残りのスペースでシフトアップしないようにするためです。
たとえば、2つの要素を並べて、その下に別の要素が必要だとします。そのため、2つの要素を左にフロートさせ、もう1つの要素をその下に配置します。
最後になりましたが、footerタグをclear宣言する前にクラスを使用したので、タグはフロート要素の後にレンダリングされfooterます。これにより、すべてのフロート要素（左/右）がその時点までクリアされます。
フロートに関連するclearfixに来る。@Elkyですでに指定されているように、これらのフロートをクリアする方法は、div要素ではない空の要素を使用しているため、クリーンな方法ではありませんdiv。したがって、ここにclearfixがあります。
親要素が終了する前に空の要素を作成する仮想要素と考えてください。これにより、フローティングエレメントを保持しているラッパーエレメントが自動的にクリアされます。この要素は文字通りDOMには存在しませんが、機能します。
フロート要素を持つラッパー要素を自動的にクリアするには、次を使用できます
.wrapper_having_floated_elements:after { /* Imaginary class name */
content: "";
clear: both;
display: table;
}:afterそのために私が使用した疑似要素に注意してくださいclass。それはそれ自体を閉じる直前にラッパー要素の仮想要素を作成します。domを見ると、ドキュメントツリーにどのように表示されるかがわかります。
ご覧のdivように、フロートをクリアするフロートされた子の後にレンダリングされます。これは、これにも使用しているプロパティをdiv持つ空の要素を持つことと同等clear: both;です。なぜdisplay: table;、contentこれはこの回答の範囲外ですが、疑似要素の詳細についてはこちらをご覧ください。
IE8は:after疑似をサポートしているため、これはIE8でも機能することに注意してください。
ほとんどの開発者は、コンテンツをページ上で左または右にフロートします。おそらくdivはロゴ、サイドバー、コンテンツなどを保持します。これらのdivは左または右にフロートし、残りのスペースは未使用のままにするため、他のコンテナーを配置すると、残りのスペースにも浮きますのでclear: both;、それが使用されるのを防ぐために、左右に浮いているすべての要素をクリアします。
------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------今、あなたが他のdivは、以下のレンダリングしたい場合はどのようなdiv1あなたが使用しますので、clear: both;それはあなたがすべてのフロートをクリアするようになりますので、左または右
------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------display: inline-block要素に、親にあなたが使用することができtext-align: left、text-align: centerまたはtext-align: right例えば。
このclearプロパティは、要素の左側、右側、または両側を、同じブロックのフォーマットコンテキスト内で以前にフロートした要素に隣接させることはできないことを示しています。クリアされた要素は、対応するフローティング要素の下にプッシュされます。例：
clear: none; 要素は浮遊要素に隣接したままですclear: left; 要素が左の浮動要素の下にプッシュされましたclear: right; 要素が右の浮動要素の下にプッシュされましたclear: both; 要素はすべての浮動要素の下にプッシュされましたclear 現在のブロックフォーマットコンテキスト外のフロートには影響しませんdisplay: inline-block;このシナリオからcssプロパティを削除するとどうなりますか？inline-block親要素を、classを持つ兄弟要素に引き伸ばしfloat-leftます。これにより、「現在のブロックの書式設定コンテキスト外のフロートに影響を与えない」ステートメントが間違っています。誰かが説明してくれませんか？
display: inline-blockすると、ブロックフォーマットコンテキストが生成されなくなります（b）その要素内のフロート/クリアと最初のフロートはすべて同じブロックフォーマットコンテキスト（ビューポート）の一部になります。
エイリアン氏の答えは完璧ですが、とにかく私は<div class="clear"></div>それを使用することをお勧めしません。これはdiv不正な構造とセマンティックの観点からは無意味な空であり、これによりコードが柔軟でなくなります。一部のブラウザでは、このdivにより高さが増し、さらに高さが必要になりますheight: 0;。しかし、フロートされた要素の周りに背景や境界線を追加したい場合、本当の問題が発生します。Webの設計が悪いため、折りたたまれるだけです。フローティングエレメントを、clearfix CSSルールのあるコンテナーにラップすることをお勧めします。これもハックですが、美しく、より柔軟に使用でき、人間やSEOのロボットでも読みやすくなっています。
clearfix次のとおりです。stackoverflow.com
1つの要素を他の要素の下に配置したい場合は、CSSでこのコードを使用します。フロートに使用されます。
コンテンツをフロートする場合、左または右にフロートできます。そのため、一般的なレイアウトでは、左ナビゲーション、コンテンツdiv、およびフッターがあります。
フッターがこれらの両方のフロートの下に留まるようにするには（左右にフロートしている場合）、フッターを次のように配置します clear: bothます。
これにより、両方のフロートの下にとどまります。
（左をクリアするだけの場合、本当に必要なのは clear: left;です。）
このチュートリアルを実行します。
floatを使用していて、右または左ではなく、下に次の要素が必要な場合。