CSS Span Float Left

Question

So I have a div and two spans:

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

Assume that B and C has sufficient contents. The CSS snippet is:

.A { position: absolute; } /* I need this to be absolute */
.B, .C { float: left; }
.clear { clear: both; }

But I keep getting the layout of the right image, while I want it to be like layout of first image (refer to image below)

Please help me. And it would be better if you kindly explain a bit why do they happen and why is my code not working like I expected. How is float actually working. Thanks.

Answer 1

Your classes in the html are capitals but not in the CSS?

EDIT:

.A { position: absolute; border: 1px solid blue; } 
.B, .C { float: left; border: 1px solid red; width: 100px; height: 20px; }
.C { height: 100px; }
.clear { clear: both; }

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

Demo on JSFiddle