コーディング

初心者がよくハマる、CSSのfloatプロパティ徹底攻略

float徹底攻略

2011年も残りわずかですね。今年最後の記事は、CSSのfloatプロパティについて書いてみようと思います。

僕はフリーのWebクリエーターをしつつ、Webの講師もしてるんですが、どの生徒さんもfloatに苦しめられてるのをよく見ます。

そこでCSSを勉強しているWebクリエーターさんにfloatとの上手な付き合いかたをご紹介します。

初心者がよくハマる、CSSのfloatプロパティ徹底攻略の目次

  1. まずはfloatを理解しよう
  2. floatした要素の親要素に付けた背景が出ない時の対処方法
  3. floatによるレイアウト崩れ（段落ち）の解決方法

1. まずはfloatを理解しよう

floatはただ、要素を左右に振っているのではない。浮いているんだ！

floatとは、左右に要素を回り込ませたいときに使うCSSのプロパティです。でもただ左右に回り込んでるだけではないのです。実はfloatした要素は浮いているのです。

HTMLを用意

<div id="contents">
    <div id="main">
        <h3>Main</h3>
        <p>ここにMainの内容</p>
    </div><!-- /#main -->
    <div id="side">
        <h3>Side</h3>
        <p>ここにSideの内容</p>
    </div><!-- /#side -->
</div><!-- /#contents -->

まずは、こんなHTMLを用意してみました。よくあるボックスモデルですよね。

CSSでボックスをわかりやすく

/* 
  とりあえず全称セレクタで
  マージン、パディングをリセット
*/

* {
  margin: 0;
  padding: 0;
}

/* コンテンツの幅を600pxに */
#contents {
  width: 600px;
}

/* 
  見やすくするために、
  メインの高さを300pxにし、1pxの枠線を付ける
*/
#main {
  height: 300px;
  border: 1px solid #333;
}

/* 
  見やすくするために、
  サイドの高さを300pxにし、1pxの枠線を付ける 
*/
#side {
  height: 300px;
  border: 1px solid #333;
}

#mainと#sideのボックスを分かりやすい様にしてみました。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

#mainに幅を付けてフロートさせてみる

#main {
  width: 298px; /* 【追加】幅を付けて */
  float : left; /* 【追加】フロートレフト！！ */
  height: 300px;
  border: 1px solid #333;
}

一見、#mainが左により、#sideが右に回り込んでいい感じに見えます。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

この時すでに事件は起きている。

最初にも書いたように、floatした要素は浮いているのです。すなわち、今、#mainは浮いているのです。その証拠をお見せしましょう。#sideに背景を付けるとそれがよくわかります。

#side {
  background-color: #00F; /* 【追加】背景色を青に */
  height: 300px;
  border: 1px solid #333;
}

すると、こうなります。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

#mainにも背景がついた！！

これが浮いているという証拠です。実は#sideは、宙に浮いた#mainの下にいるのです。#mainには背景を付けていないので透明ですよね。すなわち#mainの下に潜り込んだ、#sideの背景色が見えているのです。ただ、そのまま潜り込んだら文字がかぶってしまいますよね？そこで気を利かせて、文字は空いているスペースに出してくれているのです。これがfloatが正体でした。

floatサンプル

これでfloatした要素が浮いているという事がお分かり頂けましたでしょうか。

初心者がよくハマる、CSSのfloatプロパティ徹底攻略の目次へ

2. floatした要素の親要素に付けた背景が出ない時の対処方法

親から飛び出た子供達

floatした要素の親に付けた背景がでない！もしくは、下のpaddingやmarginが効かない！！なんてコトはありませんか？きっとあるはず。この原因は上に書いた通り、floatした要素は浮いているコトが原因なんです。子供がフロートする（宙に浮いている）と、親は挟む物が無くなってしまうのです。つまり親から巣立ってしまったのです。挟む物が無くなった親は、縮んでしまい何も挟んでいないボックスになるのです。

背景が出なくなる状況を作ってみる

上の#sideにも幅を付けてフロートを掛けてみます。ついでに背景が邪魔なんで消しときます。

#side {
  width: 298px; /* 【追加】幅を付けて */
  float: right; /* 【追加】フロートライト！ */
  height: 300px;
  border: 1px solid #333;
}

これで#contentsの子供はフロートしている状態になりました。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

親である#contentsに背景を付けてみる。

#contents {
  background-color: #CCC; /* 追加 */
  width: 600px;
}

どうですか！？背景が出ないでしょ！?

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

これはbackground-colorが効いていないのではないんです。#contentsに挟む物が無いから縮んでしまい、高さが0pxの状態なのです。その為、背景色を表示する事ができないのです。

素敵なおまじない「overflow : hidden;」

overflow:hiddenを親要素に付けて上げると失われた、高さが返ってきます。

#contents {
  background-color: #CCC;
  width: 600px;
  overflow: hidden; /* 【追加】おまじない。 */
}

すると、高さを取り戻し、設定した背景色もちゃんと表示されます。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

こんな場合はおまじないはいりません。

<div id="contents">
    <div id="main">
        <h3>Main</h3>
        <p>ここにMainの内容</p>
    </div><!-- /#main -->
    <div id="side">
        <h3>Side</h3>
        <p>ここにSideの内容</p>
    </div><!-- /#side -->
    <p class="clear">フロートしない要素</p>
</div><!-- /#contents -->

このようにフロートした要素の下にフロートしない要素がある場合はoverflow : hidden;が無くても大丈夫。

clearプロパティを忘れずに！！

.clear {
  clear: both;
}

フロートした要素の後の、フロートしない要素には必ずclearを付けましょう。なぜなら、floatしている要素の下に、後ろの要素は、どんどんと潜り込んでしまうのです。それを防止するのがclearプロパティという訳です。今回のSampleでは、#mainと#sideの間にスペースが無いため、後に続く文字は下に落ちてくれてますが、もし、スペースがあればそこに潜り込んできちゃいます。

See the Pen css-float-traning1 by Qlio (@qlio) on CodePen.23853

float使ったらclearも使う！！これらはセットで覚えましょう！！

初心者がよくハマる、CSSのfloatプロパティ徹底攻略の目次へ

3. floatによるレイアウト崩れ（段落ち）の解決方法

非常によく見かけるのはこれ。段落ちです。俗に言うレイアウト崩れってやつですね。この原因のほとんどは、幅の計算間違いによるものが多いですね。

親要素の横幅を超えんといて〜

これが答えです（笑）その為にはCSSのボックスモデルをしっかりと理解しておかいといけませんが、以下の手順で確認してみて下さい。

1. まずは、親要素の幅を確認。

まずフロートした要素を挟んでいる親要素の横幅を確認しましょう。なぜなら今回のサンプルの様に、親である#contentsの幅が600pxならば、その中の要素は必ず600px以下でないとダメだからです。

2. フロートした要素の幅を確認

続いてフロートした要素の横幅を確認しましょう。先ほど書いた通り親が600pxなら子供は600px以下でないとダメなんです。今回のサンプルは#mainも#sideも横幅298pxです。つまり合計596pxですので、600px以下に収まっています。

3. パデイング、マージンやボーダーを確認。

最後にこれらを確認して下さい。もし親要素である#contentsにpadding:10pxがついていたら、#mainと#sideの横幅の合計は、#contentsの横幅600pxから、左右のパディング分である20pxを引いた580px以下でなくてはなりませんよね。同じ様に#mainや”sideにpadding:10pxが付いていたら、横幅の298pxから、左右のパディング分の20pxを引かないと収まりませんよね。このようにパディングやボーダーの計算を忘れていないか確認してみて下さい。

floatによるトラブルは、ほとんどが「floatは浮いている」という事が原因です。これをしっかりと理解すればfloatと上手く付き合えると思います。