Why clear: right doesn't work as intended

Question

I'm always confused by clear: left, clear: right and clear: both in CSS. I know clear: both means it doesn't allow floating elements on both sides of itself.

I did some testing here. I thought the layout would appear like below, because B uses clear: both. But it doesn't. Could someone tell me why?

A
B
CD

Updated (Post the 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 on an element only clears the floats before it in document order. It doesn't clear floats after it. The left and right values mean clearance of left floats and right floats preceding an element respectively. They don't mean clearing floats before and after the element.

Since C is being floated, but doesn't have any clearance being applied, it floats next to B. B does not try to clear C because C comes after it in the document structure.

Furthermore, clear: right doesn't have any effect in your test case because none of your elements are being floated to the right anyway.