なぜクリア：右は意図したとおりに動作しません

Question

私はいつもCSSのclear: left,clear: rightとclear: bothと混同しています。私はclear: bothがそれ自身の両側にフローティング要素を許可しないことを意味します。

私はいくつかのテストを行ったhere。 Bはclear: bothを使用しているため、レイアウトが以下のように表示されると思いました。しかし、それはしません。誰かが私に理由を教えてもらえますか？

要素に （ポストコード）

<div class="container"> 
    <div class="A">a</div> 
    <div class="B">b</div> 
    <div class="C">c</div> 
    <div class="D">d</div> 
    <div class="CB"></div> 
</div> 

.container{ 
    width:100%; 
    border:1px solid red;  
} 
.B{ 
    float:left; 
    clear:both; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.A,.C,.D{ 
    float:left; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.CB{ 
    clear:both; 
} 

Answer 1

clear更新

B
CDは、それがドキュメント順に前フロートをクリアします。の後に浮動小数点数がクリアされません。 leftおよびrightの値は、それぞれ要素に先行して、左浮動小数点および右浮動小数点のクリアランスを意味します。要素の前後で浮動小数点数をクリアすることは意味しません。

Cはフロートされていますが、クリアランスが適用されていないため、Bの横に浮かんでいます。Cは、Cがドキュメント構造の後ろに来るため、Cをクリアしようとしません。

さらに、clear: rightは、いずれの要素も右に浮かぶことがないため、テストケースには何の効果もありません。

Answer 2

あなたが使用している場合はdivの後に動作する明確なを持つことができます。

.clr:after { 
visibility: hidden; 
display: block; 
content: ""; 
clear: both; 
height: 0; 
}