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

floatの解除

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

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

PR

2カラムのレイアウト

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

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

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

#wrap{
    width:500px;
}

#side{
    float:left;
    width:240px;
}

#main{
    float:right;
    width:240px;
}
<div id="wrap">
    <div id="side"></div>
    <div id="main"></div>
</div>

<div id="footer"></div>

 

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

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

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

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

 

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

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

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

#wrap{
    width:500px;
}

#side{
    float:left;
    width:240px;
}

#main{
    float:right;
    width:240px;
}

.clear{
    clear:both;
}

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

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

<div id="wrap">
    <div id="side"></div>
    <div id="main"></div>
    <div class="clear"></div>
</div>

<div id="footer"></div>

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

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

 

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

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

#wrap{
    width:500px;
    overflow: hidden;
}

#side{
    float:left;
    width:240px;
}

#main{
    float:right;
    width:240px;
}

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

<div id="wrap">
    <div id="side"></div>
    <div id="main"></div>
</div>

<div id="footer"></div>

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

 

【パターン３】clearfixで解除

フロートの解除

#wrap{
    width:500px;
}

#side{
    float:left;
    width:240px;
}

#main{
    float:right;
    width:240px;
}

/* IE以外のモダンブラウザ向け */
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
/* IE7およびMacIE5向け */
.clearfix{
  display:inline-block;
}
/* IE6以前向け */
/*Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/

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

<div id="wrap" class="clearfix">
    <div id="side"></div>
    <div id="main"></div>
</div>

<div id="footer"></div>

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

 

３パターン紹介しましたが、とりあえずパターン１はマスターしましょう！

関連記事