float と clear

昨日、サイトを作っていたときに、自分の想定と違うレンダリング結果が得られた訳です。
それが表題にもある 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;

}

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

070915デモ画像A

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

070915デモ画像B

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

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

どなたかご説明お願いいたします<(_ _)>

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :