Firefox:div の扱いが変

　既存のページのレイアウトをちょっと変えて、

<div style="width: 500px;" align="left">
    <span style="float: left;">左寄せ</span>
    <span style="float: right;">右寄せ</span>
</div>
<hr>

　というコードを書いたら、最後の <HR> がとんでもないところに表示される。
　しばらく悪戦苦闘してから他のブラウザで表示させてみると IE,Chrome,Safri では問題なく表示される(多少垂直マージンに差はあったが)。
　FireBug を使ってよくよく調べていくと、<div></div> で定義した領域の高さがない。中身が[空]になっていて、そのせいで <div> の最後で当然実行されるべき <BR> が実行されず <HR> がとんでもないところに表示されるようだ。
　ためしに </div> の後ろに <BR> を入れると正常な位置に <HR> が表示された。のだが、他のブラウザで余分に行間が開いてしまう。

　最終的には <div> の直後に全角のスペースをひとつ入れることで解決。エレガントな解法はべつにありそうだが、とりあえず良いことにしよう。