twataの備忘録

仕事、読書、ガジェット、グルメ、写真、旅行など雑多な備忘

hrタグを使ってdivへの回り込みをなくす方法

HTMLとCSSを編集していて、divの中にtableを入れたときに、次のhタグがtableの上に回り込んでしまった。
それを防ぐのに苦労したのでメモ。
この図のようにしたかった。

<div id="a">の中にはtableがある。 ところがこの図のように、<div id="a">に重なって次のhタグが重なってしまう。

そこでclearというクラスを作りclearには回り込みを解除するように、clearに属するhrは何も表示しないようにcssを記述した。 [cc lang="css"] .clear { clear:both; }
.clear hr { display:none; }
[/cc]

またhtmlにはhrを記述した。 [cc lang="html"]


←この行を追加

[/cc]

こんなイメージ。

これでレイアウトが崩れてたのが直った。