WEBデザイナーズNEXT

Webデザイナー

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

カテゴリー:CSS
Pocket

回り込みを阻止
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を入れておくととっても便利ですよ。

こんな記事もどうですか?
footerの下に余白が!footerを下に固定する方法

スポンサードリンク

Pocket

カテゴリー:CSS
WEBデザイナーズNEXT TOP