css - CSSスパンフロート左

Question

だから私はdivと2つのスパンを持っています：

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

BとCに十分な内容があると仮定します。CSSスニペットは次のとおりです。

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

しかし、最初の画像のレイアウトのようにしたいのですが、正しい画像のレイアウトを取得し続けています（下の画像を参照）

私を助けてください。そして、なぜそれらが発生するのか、そしてなぜ私のコードが期待どおりに機能しないのかを少し説明していただければ幸いです。フロートは実際にどのように機能していますか。ありがとう。