簡単CSS！floatで背景が消える問題解決

突然ですが。よく街中でデザイナー系の人がタバコを吸いながらfloatで詰まって「あ～だからコンピューター嫌なんだよ」風な顔をしている人を街中で良く見かけます。そして僕は思いました。これはBLOGで詳しく説明するしかない！っと。・・・では！勝手ながら今日は、floatを使って起こりうる問題とその解決策を紹介しましょう。

とりあえず良くあるfloatとdivを使ったときに起こる問題：

１）　息子要素divにfloatをつけたら親要素divの背景が消えちゃった系の問題

ありますね。ほら。あるでしょ？あなたも。ほら、そこのあなたも！これはweb designerの皆がぶち当たって砕けそうになる問題の一つです。ではわかりやすく例を出して説明していきましょう。

例えば緑のpapaという 200×300　の縦長の背景があるとします。
その背景を背に青いmusuko (100×50) と赤いmusume (100×50)を　右左に表示してみたいと思います。

<div id="papa">
    <div id="musuko" style="float:left;">外で遊びたい</div>
    <div id="musume" style="float:right;">ママのほうが好き</div>
    パパの長い説教
    パパの長い説教
    パパの長い説教
    パパの長い説教
</div>

では図に描いてわかりやすくこの現実をお見せしましょう。

理想の世界ではパパである親要素が、子要素である息子、娘のBOXの長さも取り入れて背景を持続させたい。
現実では、一定のブラウザですが、「パパの説教」が子要素の下敷きになり見えなくなってしまう。

それは、ずばり何故か！？そう。floatです。泣く子も泣くfloat。

floatとはソモソモ直訳で「浮く」という意味です。
なので現実の図でわかるように、パパはしっかりと地に足がついているのに。息子と娘が浮いていますね。
そうです。また言いますが、floatは浮いているのです。浮いているのでパパにheight:auto;　でね。
なんていっても、息子、娘を囲えません。簡単に言えば次元が違う。でしょうか。では、どうしたらいいか。

解決案

解決案はいくつかありますが。今回は全ブラウザで利用できる解決案。ザ・オンリーワン・解決案を紹介します。

<div style=”clear:both;”></div>を最後のfloat要素のあとにつける。

つまりこういうことです。

<div id="papa">
    <div id="musuko" style="float:left;">外で遊びたい</div>
    <div id="musume" style="float:right;">ママのほうが好き</div>
    <div style="clear:both;"></div>
    パパの長い説教
    パパの長い説教
    パパの長い説教
    パパの長い説教
</div>

これで現実は理想になりました。

コンピューターの前で「パパ・・・がんばって！」って言いたくなっちゃいますね。
あの街中でタバコを吸っていたデザイナーの人たちもパパだったのかなぁ・・・おつかれさまです。
それでは今日はこの辺で・・・