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;
}
お礼
ご回答ありがとうございます☆ なるほど！その手があるんですね！