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

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

確認環境

  • IE 9.0.2
  • Google Chrome 14.0.835.163
  • FireFox 6.0.2


(1)回りこんでしまう例

表示例

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>

(2)回り込みを回避した例

表示例

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>

以上

コメント