フロートさせたら崩れた・゜゜(>_<)゜゜・。

スタイルシートでのデザインを勉強しはじめたとたん、「フロートさせたら背景が出ないor崩れた！」という壁にぶつかってパニックになってる方は多いんじゃないでしょうか。
わたしもかつて・・・。背景に画像をしいたのに
下まで表示されなくて、いろんなブラウザで表示しながら一日つぶしてしまったことが・・・

これは、このフロートの後のクリア（解除）ができてないために、フロートのボックスが乗っかっている元のボックスの中に何も入ってない状態になってしまうことから（表現に語弊があるかもしれないけど、なるべく初心者さんにわかりやすい言い方を探しながら書いてます）
元のボックスに指定した背景画像や色などが表示できなかったり、次のブロックが入り込んでしまい崩れたりします。

では、「フロートの後の解除」ってどうやればいいの？という話ですが、
クリアの方法はいろんなやり方があるらしく（ハックを使う、クリアフィックス、hrタグを入れてそこにスタイル指定・・・など・・検索するといろいろ出てきます）
わたしは一番簡単な、
フロートの外側のブロックの閉じタグの前に、クリアするブロックを入れる、というのをよく使っています。

余分なdivを増やしたくない人は他の方法をとったほうが良いと思いますが、初心者さんにはかなり簡単なのでおすすめです。

このやり方は、動画マニュアル　Dreamweaverでのスタイルシートの使い方　フロートの後をクリアする方法に書いてますので、
興味のある人は見てみてください。



この動画では、スニペットを使って便利に使い回す・・・という方法を紹介しています。
わたしはスニペットを知らない頃はなんでもかんでも単語登録してて、
くりあ＠　で変換すると＜div style="clear: both;"＞＜/div＞
がでることになってます (ﾉ_<｡)