[HTML/CSS]意図しない回り込みの回避

暫く悩んでいたが昨日解決したので忘れないうちに記しておく。

確認環境

• IE 9.0.2
• Google Chrome 14.0.835.163
• FireFox 6.0.2

（１）回りこんでしまう例

表示例

test

test
test
test
test
test

コード例

<div style="float: left; background-color: blue;">
<p>test</p>
</div>
<div style="background-color: yellow;">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>

（２）回り込みを回避した例

表示例

test

test
test
test
test
test

コード例

<div style="background-color: blue; float: left;">
test</div>
<div style="background-color: yellow; float: left;">
test<br />
test<br />
test<br />
test<br />
test</div>
<div style="clear: both;"></div>

以上