13

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

div.clear {
    clear:both;
}
4

6 に答える 6

47

要素の高さは、明示的に設定されていない限り、その子要素によって決定されます。例えば：

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

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

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

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

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

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

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

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

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

于 2012-04-17T04:19:37.697 に答える
1

浮いたスタイルを一掃することです。

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

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

于 2012-04-17T04:12:32.117 に答える
1

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

于 2012-04-17T04:27:59.773 に答える
1

decezeによる良い説明。しかし<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です。

于 2013-06-20T09:11:44.560 に答える
0

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

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

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

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

于 2012-04-17T04:30:24.493 に答える