divに「clear：right」がある場合は、その右側に何も表示されませんか？

Question

私は「クリア」というキーワードが意味することを混乱させたようです。

私はdiv要素をいくつも持っていますが、すべて "float：left"です。 2番目の最後のdiv要素には "clear：right"もあります。次の要素が次の行に移動すると考えました。しかし私のために、それはしません。

ここに私の例です：

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="Number">0</div> 
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
    <div class="Duration">00:00:32</div> 
</div>​ 

は次のようになります。

私は時間（ "夜12時00分32秒"）を作るしようとしています、次の行に表示されます、サムネイル（青色の長方形）の右側に表示されます。

私は最後の3つのdivを別のコンテナdivに入れることができますが、この問題の目的は「クリア：right」がタイトルの右側に浮かんでいる時間を止めない理由を理解することです。ここで

は、CSSです：

div.Section 
{ 
    overflow:auto; 
    background:cornsilk; 
    border:2px solid navy; 
    padding:12px; 
} 

div.Section div.Thumbnail 
{ 
    width:64px; 
    height:42px; 
    background:SteelBlue; 
    foreground:Navy; 
} 

div.Number 
{ 
    width:16px; 
    margin-left:6px; 
} 

div.Duration 
{ 
    margin-left:22px; 
} 

div.Section div 
{ 
    float:left; 
} 

div.Section div.Title 
{ 
    color:DarkGreen; 
    clear:right; 
} 

そして、もちろん、jsfiddleリンク：http://jsfiddle.net/8J7V6/3/

Answer 1

clearプロパティがクリア要素の後にその空間に配置されているから要素を防ぐことはできません動作するはずです。これは、要素がすでにその方向にフローティングされている場所に要素が配置されないようにします。 clear:leftをdiv.Durationに追加すると、ネイビーボックスの下に配置されます。継続時間の前に<br/>を追加すると問題が解決する可能性があります。すでに質問したように、最後の3つのdivに別のコンテナdivを使用できます。

Answer 2

私はパディングとマージンを使用していました。あなたのケースで使用することができない場合、次の解決策は適切ではありません。

http://jsfiddle.net/8J7V6/5/

Answer 3

それの右に浮動ものはありません。あなたが直面している問題は、時間の前にすでにすべてのコンテンツを送っていて、次に左に浮かぶ時間を伝えているということです。 まだ左に浮いていますが、のコンテンツの上にちょうど積み重なっています。が既にあります。が左側にあります。

しかし、はい、右にクリアすると、その要素は、その前に右に浮かんでいるすべての要素を壊してしまいます。クリアは、後の要素には影響しません。

using a simple <br /> after your titleを試しましたか？

Answer 4

.Duration { clear: left; }は

Answer 5

アールスの答えは正しいものですが、私は誰もあなたの質問に本当に答えなかったことに気づきました。基本的にclear:leftは、左浮動要素を指します。 clear:rightは右浮動要素を指します。

要素が左に浮かんでいて右にないため、clear:rightは影響を受けません。

もう1つのことは、2つのテキスト要素を青いボックスから別のdivにラップし、そのコンテナdivと青いdivをフロートさせてから、2つのテキスト要素を浮動させると、clear:leftコードはあなたのコンテナdiv内にまだテキストの下にある日付で、それが残っている青いイメージの下ではありません。

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="TextContainer"> 
     <div class="Number">0</div> 
     <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
     <div class="Duration">00:00:32</div> 
    </div> 
</div> 

とあなたのCSSに以下を追加：

div.TextContainer { 
    float:left; 
} 

は何が必要他のビジュアルスタイルに追加します。このよう