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

2011年も残りわずかですね。今年最後の記事は、CSSのfloat
プロパティについて書いてみようと思います。
僕はフリーのWebクリエーターをしつつ、Webの講師もしてるんですが、どの生徒さんもfloatに苦しめられてるのをよく見ます。
そこでCSSを勉強しているWebクリエーターさんにfloatとの上手な付き合いかたをご紹介します。
初心者がよくハマる、CSSの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した要素が浮いているという事がお分かり頂けましたでしょうか。
初心者がよくハマる、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と上手く付き合えると思います。