2コラムレイアウトなどでfloatで左右に振る方法があるが、floatを指定した要素を包含する親要素のボックスは高さ0でレンダリングされてしまう。

これを解決する方法として、<br />タグにclear属性を指定して強制的にfloatを解除したりしていたが、この空要素は正当でなく、無い方が好ましい。

で、別な方法があの雑誌に載ってました。WEB雑誌は押し並べてFLASHサイトばかりに注目するので FLASH DESIGNING とか FLASH CREATORS とかにしたらどうかと思うけど(そういう僕も凄いと思うサイトは激しく FLASH だったりするが)、結構良い記事書いてます。

その方法は、floatを指定した要素を包含する親要素にoverflow: auto;を指定すること。

指定無しの例

“side bar” 要素と “contents” 要素にそれぞれfloat: left;float: right;が指定してあり、"main" 要素がその親要素にあたる。

overflow を指定した例

親要素で全体を囲うデザインの場合はこれで解決できそう。