なぜ<div class="clear"></div>がコンテナDIV内に複数のフローティングDIVSの後に使用されるのですか？

Question

私は多くの場所で<div class="clear"></div>に遭遇しましたが、なぜそれが行われているのか分かりません。誰かが私にこれを要約できます、なぜそれがCSSで使われていますか？これはCSSです：

div.clear { 
    clear:both; 
} 

Answer 1

要素の高さは、その子要素によって決定されます。例えば：

+------A------+ 
|+-----------+| 
||  B  || 
|+-----------+| 
|+-----------+| 
||  C  || 
|+-----------+| 
+-------------+ 

Aの高さは、その子Cの下限がどこであるかによって決まります。

さて、浮動要素は親の高さにはカウントされません、彼らは定期的な流れから取り出している：

+------A------+ 
+--+---------++ 
    | B | 
    +---------+ 
    +---------+ 
    | C | 
    +---------+ 

要素は、最小限の高さにつぶされ、その2人の子供がいるので、浮かんだ。

クリア要素が正しい高さを復元するために導入される。

+------A------+ 
| +---------+| 
| | B || 
| +---------+| 
| +---------+| 
| | C || 
| +---------+| 
|+-----D-----+| 
+-------------+ 

D要素セットclear属性と高さがゼロの要素です。その結果、浮動要素の下に落ちます（はをクリアします）。これにより、Aは、高さを計算するための通常の子要素を持つようになります。それは少なくとも最も典型的な使用例です。

余分なHTML要素を導入するより良い解決策は、Aをoverflow: hiddenに設定することです。これには、高さ計算を強制する効果があります。これは、高さを希望のサイズに拡大するのと同じ効果があります。このソリューションには、他の副作用がある場合とない場合があります。

Answer 2

フローティングスタイルをクリアすることです。明確

：http://www.w3.org/wiki/CSS/Properties/clear

フロート（それが明示的に設定されていない限り）http://www.w3.org/wiki/CSS/Properties/float

Answer 3

要約すると、前の要素の左側または右側のいずれか（つまり、div、span、anchor、tableなどの要素）をブラウザに許可しないように指示するのと同じです。これにより、次の要素が次の行に移動します。

Answer 4

floatベースのレイアウトでコードを記述するときに最もよく遭遇する問題は、親divコンテナが子フローティング要素の高さまで拡張されないことです。これを修正する典型的な解決策は、浮動要素の後にクリアフロートを持つ要素を追加するか、親divにクリアフィックスを追加することです。

私は山車のクリアについてよりよく理解するためにあなたにいくつかの2つの良い例を与えている： - decezeによって

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Answer 5

良い、について説明を。しかし<div class="clear"></div>は

#anyelement:after { display: block; content: "."; clear: both; font-size: 0; line-height: 0; height: 0; overflow: hidden; } 

を使用して、古い方法と専門外の試みであるだけように#firstlement:after, .secondelement:afterと同じようにクリアする必要がある他の要素を追加し続けます。