floatを使う事によって回り込んでしまって崩れてしまう…。
HTMLやCSSを初めて最初につまづく場所なんじゃないかなぁと思います。

私も昔はとても苦労しました。
昔は<br clear=”all” />を入れてみたり、<div class=”clear”></div>のような空divを入れてみたり…。今となっては思い出したくない思い出の一つです。

今は「clearfix」なるものを使ってシンプルに回り込みを阻止する事ができるようになったので、
これについてまとめておこうと思います。

何もしないとfloatを使った時に回り込んでしまう。

まずは簡単なレイアウトで試してみます。
成功例としては以下のような感じです。2カラムの一般的なレイアウトでしょうか。

そしてコーディング…。
floatをleftにして…とコツコツコーディングをしていきます。
まずは何もしない状態で確認してみます。

何も対策をしない状態で一回コーディングをしてみる

html

css

…で、結果がこちら

やだこれ…気持ち悪い…って感じですよね。
Footerが回り込んでしまいます。

clearfixを使って回り込みを阻止する

これを阻止する為にはこんな感じで書けば一発解決なんです。
成功例がこちら

html

css

追加した部分は.clearfix:afterの部分ですね。clearfixを「設置したdivの後ろに適用させる」という書き方です。

もうfloatで悩まない！clearfixを使って回り込みを阻止する　まとめ

まぁ、やってみると簡単なんですけどね。知らないうちは色々試行錯誤してしまうものです。Webデザイナーの方は多分、コーディングスタートする用のデフォルトテンプレートのようなものを用意してると思うのですが、そのデフォルトテンプレートの中に.clearfixを入れておくととっても便利ですよ。