フルCSSでレイアウトしていると必ず起こる問題が、floatしているボックスを内包しているボックスの高さが下まで伸びてくれない問題。
これはCSSの仕様なので仕方ないのですが、デザイン上伸びてもらわないと困ります。
11月号の「Web Creater」で新しい解決方法を見つけたのでメモメモです。
Webでも探したら、やはりこの解決法を載せた記事がありました。
これを解決する方法はいくつかあるのですが、ひとつは「clear」を使う方法。
もうひとつは、外側のボックスにも「float」を設定する方法。
で、最近発見したのが「overflow」を使う方法です。
一つ目の解決方法の「clear」を使う方法ですが、この方法の問題としては余計なボックスが増えてしまうことがあるということ。
二つ目の解決方法の外側のボックスに「float」を指定する方法の問題は、レイアウトが崩れてしまって使えない場合があるということ。
三つ目の方法の「overflow : auto」を指定する方法は、まだあまり試していないのでなんとも言えないけれど、現時点では問題なさそうです。
これが一番いい解決方法かもしれません。
