floatのクリアについて

質問

以下のように「test1」,「test2」というclassを「test」の中で左右に
配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを
解除することが出来ません。（IEの７では解除できましたが、FireFoxの
3.0.11での解除が出来ません）

「test」の</div>直前に<br class="test3" />を入れると解除されるので
すが、<br>を使わずに解除する方法はありますでしょうか？

現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を
下に続けて並べたいと考えています。

ご教授よろしくお願いします。

■■■HTML■■■
<div id="test">
　　　<div class="test1">
　　　　　　<img src="画像" width="100" height="100" />
　　　</div>
　　　<div class="test2">
　　　　　　<p>test2</p>
　　　</div>
</div>

<h2 class="test3">test</h2>

■■■CSS■■■
#test {
width: 500px;
margin: 0 0 20px 0;
}
.test1 {
float: left;
width: 100px;
margin: 0 10px;
padding: 0;
}
.test2 {
float: left;
width: 380px;
margin: 0;
padding: 0;

}
.test3 {
width: 500px;
clear: both;
}

回答No.2

tenderfeel

IEは7になっても解釈が違うので困ったものですね。
高さが無くなる現象は、
#test {
float:left;
}
※親要素にもfloat

または
#test{
overflow:hidden;
zoom:100%;
}
※overflowとzoom追加

でも解除できます。
ただし後者はtableなどに影響が出ますので、tableを使うならclearfixの方がよろしいかと。

お礼

ご回答大変ありがとうございました。

親要素へもfloatを設定すると解除できるんですね。
tableも使うことがあると思うのでclearfixでやってみようと思います。

ブラウザ（IE?）の規格統一を切に願います。

回答No.1

abril

> 一番最後のh2にあるclassのclearが反映されずfloatを解除することが出来ません。

いえ、このh2に指定したclear自体は有効なので反映はされています。「解除できない」と思われたのは、IE7では#testにmargin-bottomoとして設定した20pxが空いているのに対し、Firefox3では空いておらずtestに続けてh2がぴったりとくっついて描画されてしまっている部分をおっしゃっているのだと思います。現状は、floatしている子要素test1とtest2を持つ親要素のtestに対する直接の処置がとられていない為、親要素testは子要素の高さを認識できないまま実質高さ0として描画されています。floatに対する解釈としては実はこちらの方が正しいので、IE7の結果は間違った解釈の賜（？）です。
※試しに、#testに一時的に背景色なりボーダーなりを指定してみて下さい。Firefox3ではtestがぺしゃんこになってtest1とtest2がそこにぶらさがった状態になっているのが一目瞭然になります。

依って、親要素testが高さを認識できる様になる為には、”testの内部で、test1とtest2の後ろにclearを指定した要素を置く”、つまり

> 「test」の</div>直前に<br class="test3" />を入れる

といった様な方法です（brとは限らない）。

この方法を使わずに且つこのマークアップのままで…という事になると、test自体に”子要素がfloatしていても高さを認識できる様にする”スタイルを設定してやらねばなりません。となるとやはり所謂clearfixというtipsを盛り込んであげるのが簡単でしょう。
clearfixの書き方には色々ありますが、以下は一例です。

#test {
zoom: 100%;←追加
width: 500px;
margin: 0 0 20px 0;
}
#test:after {←全体を追加
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

これでお望みの状態が得られる筈です。不具合等ありましたら補足して下さい。

お礼

ご回答大変ありがとうございました。

ご回答いただいてさまざまな有名サイトのソースを見たところ
clearfixでほとんど組まれていました。

これまでbrでクリアーしていたのでfloatの仕様を気にしたこと
が無かったので大変参考になりました。

ありがとうございました。