web-dev-qa-db-ja.com

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

多くの場所で<div class="clear"></div>に遭遇しましたが、なぜそれが行われるのかわかりません。誰かがこれについて私に簡単に説明できますか、なぜそれがcssで使用されているのですか？これはCSSです：

div.clear {
    clear:both;
}
csshtmlclear
12
OM The Eternity

要素の高さは、その子要素によって決定されます（明示的に設定されている場合を除く）。例えば。：

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

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

現在、フローティング要素は親の高さにカウントされず、通常のフローから除外されます。

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

A要素は、2つの子が浮いているため、最小の高さに折りたたまれています。

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

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

D要素は、clear属性が設定された高さゼロの要素です。これにより、フロートされた要素を下回ります（clearsそれら）。これにより、Aは高さを計算するための通常の子要素を持ちます。これは、少なくとも最も一般的なユースケースです。

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

46
deceze

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

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

フロート： http://www.w3.org/wiki/CSS/Properties/float

2
Brian

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

1
asprin

Floatベースのレイアウトでコードを作成するときに直面する最も一般的な問題は、親divコンテナーが子floating要素の高さまで拡張されないことです。これを修正する一般的な解決策は、フローティング要素の後にクリアフロートを持つ要素を追加するか、親divにクリアフィックスを追加することです。

フロートのクリアについて理解を深めるために、2つの良い例を示します：-

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

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

1
Shailender Arora

10年までに良い説明。しかし、<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などのクリアが必要な他の要素を追加し続けるだけです。

1
Raza