17

私は<div>それ自体でラインになりたいと思っています。W3Schoolsによると、このルール:

div.foo {
  clear: both;
}

...これを意味する必要があります：

「左側にも右側にも浮動要素は許可されていません。」

ただし、2 つの<div>要素を左にフロートさせ、上記のルールを最初の要素に適用すると、2 番目の要素は動きません。

一方、"clear: left"2番目に適用する<div>と、次の行に移動します。これは私の通常のアプローチですが、なぜこのようにしなければならないのかわかりません。

上記の W3Schools の説明は不十分ですか、それとも何か不足していますか? 消去ルールは、それが適用されている要素のみを移動できますか?

答え

良い説明をしてくれた Michael S と John D に感謝します。Warrenは CSS2の仕様を指摘し、それが私がこの回答を見つけた場所です (強調は私のものです):

このプロパティは、要素のボックスのどの辺が 以前のフローティング ボックスに隣接していない可能性があるかを示します。

そのclearため、コードの前に表示される要素に対して、それが適用される要素の位置にのみ影響します。

他のdivを下に移動するように指示できないのは残念です<div>が、それらは休憩です。:)

4

5 に答える 5

13

要素に clear を適用すると、その要素が左右に移動しないように移動します。他の要素を再配置するのではなく、周囲に何もない位置に要素を移動するだけです。

編集

クリアされたアイテムより上のアイテムは移動されず、要素の下のアイテムは移動される可能性があります。コメントの追加コメントにも注意してください

于 2008-10-17T15:48:06.133 に答える
3

あなたのCSSは「正しく」解析しています。2 番目の div はまだ左にフロートされているため、最初の div をクリアした後でも、2 番目の div の幅に余裕がある場合は、一番上のポイントで左にフロートされます。

于 2008-10-17T15:51:40.743 に答える
3

はい、クリアすると、それが適用されている要素のみが移動します。ただし、要素が「流れている」か「流れていない」かによって、結果は異なります。それはあなたを混乱させていると思います。

要素がフロー内にある場合、クリアすると、後続のすべてのものとともに下に移動します。現在のペンの位置 (次の要素を配置する場所) を下に移動すると考えてください。この動作は理解しやすいです。

例のフロートのように、要素がフローから外れている場合、要素のみが移動し、他のルールで移動させない限り、ペンの位置は同じ場所に留まります。たとえば、フロートを前のフロートの上から開始することはできません。

マージンの崩壊という面倒な問題もあります。クリアすると、時には直感的でない方法でそれらが中断されます。

于 2008-10-17T16:20:13.027 に答える
2

新しい行で必要な要素に clear を適用します。使用するクリアは、接触させたくない要素によって異なります。画像 B を新しい行に配置し、画像 A (float: left とします) に触れないようにする場合は、画像 B を {clear: left} not clear right として置きます。前の要素のフロートをクリアしています。

于 2008-10-17T15:53:33.330 に答える
1

私は通常、その効果のために次のことを行います。

float: left;
clear: right;

それが適用される要素にのみ適用されるかどうかはわかりませんが、理にかなっています。

ただし、仕様はここで入手できます: http://www.w3.org/TR/REC-CSS2/

于 2008-10-17T15:49:11.917 に答える