floatボックスが親ボックスを突き破る時の解決法

このところ、ずうっとハマっていた問題でやっと解決したので、忘れないうちにブログに書いておきます。

http://www.web-designlab.com/2008/10/float%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%8C%E8%A6%AA%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E7%AA%81%E3%81%8D%E7%A0%B4%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6.html
今回はこちらのサイト様を参考にさせて頂きました。ありがとうございます。

解決法の一番目を使用しました。
今回、ハマっていた時のソース。

<div class="box">
box
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
<div class="clear"></div>

上記のサイトを参考にした、正しいソース。

<div class="box">
box
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="clear"></div>
</div>

上記共通CSS部分

.box {
	border: 1px solid #666;
}

.item1 {
	float:left;
	width: 100px;
	height:100px;
	background: #CC0099;
}

.item2 {
	float: right;
	width: 100px;
	height:100px;
	background: #f0f0f0;
}

.clear{
	clear: both;
}

ミソはdiv.boxの内部にdiv.clearを入れることです。
参考にさせて頂いた記事に、clearfixやoverflow:autoの方法もありましたが、とりあえずこの手法を今回採用しました。