Warum klar: richtig funktioniert nicht wie vorgesehen

Question

Ich bin immer verwirrt von clear: left, clear: right und clear: both in CSS. Ich weiß, clear: both bedeutet, dass es keine schwebenden Elemente auf beiden Seiten von sich selbst erlaubt.

Ich habe einige Tests here. Ich dachte, das Layout würde wie folgt aussehen, weil Bclear: both verwendet. Aber das tut es nicht. Kann mir jemand sagen warum?

A
B
CD

Aktualisiert (Beitrag des Code)

<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 auf einem Elemente löscht nur den Schwimmer vor es in dem Dokument um. Es löscht nicht Schwimmer nach es. Die Werte left und right bedeuten Abstand der linken Schwimmer und der rechten Schwimmer vor einem Element. Sie bedeuten nicht, Floats vor und nach dem Element zu löschen.

Da C floating ist, aber keine Clearance angewendet wird, schwebt es neben B. B versucht nicht, C zu löschen, weil C in der Dokumentstruktur dahinter steht.

Darüber hinaus hat clear: right keinen Effekt in Ihrem Testfall, weil keines Ihrer Elemente sowieso nach rechts schwebt.

Answer 2

Sie können eine klare haben, die nach dem div funktioniert, wenn Sie verwenden:

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