floatを解除してレイアウト崩れを防ぐ方法

floatの解除

floatを使った場合、親要素の高さがなくなりレイアウト崩れの原因になります。

今日はfloatを解除する方法です。

PR

2カラムのレイアウト

2カラムのレイアウトを実現する方法もいくつかありますが、今回は子要素にfloat:leftとfloat:rightを記述する方法で説明します。

※#wrap(グレー)は、#side(イエロー)と#main(ブルー)と同じ高さになりますが、説明のため見えるように高さを広げて表示しています。
フロートの解除

このレイアウトを実現するために、下のようにコードを記述します。

 

ところが期待した結果は得られず、レイアウトは次のように#side(イエロー)と#main(ブルー)の下に重なるように#footer(レッド)が表示されます。
フロートの解除

floatを使うと親要素の高さがなくなる

これは、#side(イエロー)と#main(ブルー)にfloatを使ったため、親要素である#wrap(グレー)の高さがなくなったためです。高さがなくなった#wrap(グレー)に続けて#footer(レッド)が表示されたので重なって表示される結果になりました。これは、レイアウトが崩れる原因の一つです。

そこで、floatを解除する3つの方法を紹介します。ちなみに、このブログではパターン1の基本形を使用しています。

 

【パターン1】clear:bothで解除

まずは基本の型です。
フロートの解除
floatを使用した要素の後に1つ要素を追加します。今回はclassで名前を付けます。

なぜ、classなのか?というと、floatの解除はページの中で複数回使用する可能性があるのでclassにすべきだからです。同一のid名はページ内で繰り返し使用できません。

CSSへは、15行目~17行目が追加された部分です。
セレクタを「.clear」とすることで、どの要素にも使用することができます。

こまかく説明すると、float:leftを使用した時は、clear:left。float:rightを使用した時は、clear:rightにより解除しますが、通常はclear:bothで両方解除されている方が多いようです。

floatを使用した後の4行目の「<div class=”clear”></div>」部分でfloatが解除されます。

floatを解除するための要素なので、表示するコンテンツがなくdivの空要素というのが気になりますが・・・

 

【パターン2】overflow:hiddenで解除

2つ目は、割とお手軽に解除できるパターンです。
フロートの解除

CSSの3行目の様に、floatを使った親要素に対して「overflow: hidden;」を適用します。これだけで、HTMLには手を加える必要はありません。

確かにfloatは解除されますが、このやり方はOKなのか?という疑問もあります。更に、古いブラウザでは正常に動作しない可能性あり。

 

【パターン3】clearfixで解除

フロートの解除

clearfixも様々ありますが、上で記述したのは、Webデザイニング 2004年11月号で紹介されていたclearfixです。

clearfixは、floatを使用した親要素に対して適用します。

 

3パターン紹介しましたが、とりあえずパターン1はマスターしましょう!

PR

関連記事