昨日、サイトを作っていたときに、自分の想定と違うレンダリング結果が得られた訳です。
それが表題にもある float と clear 周りなのですね。

そのときに使用した HTML と CSS がこんな感じ。（一部抜粋）

HTML

<div id="container" class="clearfix">
<div class="section070914a">
<p>ダミーダミーダミー</p>
</div>
<div class="section070914a">
<p>ダミーダミーダミー</p>
</div>
<div class="section070914a">
<p>ダミーダミーダミー</p>
</div>
<div class="section070914b">
<p>ダミーダミーダミー</p>
</div>
</div>

CSS

div#container {

width: 800px;

}

div.section070914a {

float: left;

clear: left;

width: 600px;

margin: 20px 0;

background: #f00;

}

div.section070914b {

float: right;

width: 190px;

margin: 20px 0;

background: #00f;

}

で、自分としては下図のようになるのかなと思った訳です。

ただ 実際は次の図のようになった訳ですね。（OPERA・Firefox）

はぁ、そうですか。と思ったまでは良かったんですけどね。。。

仕様にそってこのレンダリング結果を説明するとなるとどういうこと!?とも思った訳ですよ。

どなたかご説明お願いいたします＜（＿ ＿）＞