実際に回りこんでいるのは何？ | floatの正体に迫る！その1

floatとは何か？を問われたら、要素が回り込むんだよ！と答えがちでした。でもちょっと違うようです。基本中の基本ですが、ここでfloatの正体を押さえるか否かで大きな差が出てきます。floatの正体に迫りました！

そもそも、floatって何なの？

ブロック要素を横並びにしたい、テキストを回り込みさせたい。そんな時に使用するのがfloatですが、私の経験では、崩れたり背景が消えてしまうことがありました。その原因と解決法を調べるために、様々な方のブログ等を参考にさせていただくことがあるのですが、以下のような図解で説明していただいてる事が多い気がします。

これが、私がfloatを理解するのに時間がかかってしまった理由であることが、講座を受けてわかりました。
“floatは、ブロック要素（またはブロック要素として認識されるもの）に内包されているコンテンツに対して作用するはずだからです。”
ちょっと長いですね…。
初めて聞いた際、意味がわかりませんでした。ブロック要素に指定しているから、ブロック要素が回り込むのではないのでしょうか？

floatすると消える？

一度、さきほどの図解を頭から外す為に、講座では手を動かしながら、確認していきました。
オリーブ色の背景色のブロック要素とオレンジ色の背景色のブロック要素を横に並べたいと思います。

HTML

<div id="olive">オリーブ</div>
<div id="orange">オレンジ</div>

CSS

#olive { 
background: olive;
width: 140px;
height: 140px;
float: left
}

#orange {
background: orange;
width: 140px;
height: 140px
}

オリーブにfloat: left;をつけてみました。オレンジにも背景にオレンジ色を入れているのですが、オレンジ色が見当たりません。でも、オレンジのテキストはあります。floatは回り込みのはず。でも、背景色が消えてオレンジというテキストが下にあるように見えます。なんでしょうコレ…

回り込んでいる正体とは？

先ほどのオレンジのサイズを少し大きくし、テキストを増やしてみます。

背景色が少し見えてきました。回り込んでいるのはテキストだけで、背景色は回り込んでいません。
ここで、冒頭の言葉がやっと理解できます。
“floatは、ブロック要素（またはブロック要素として認識されるもの）に内包されているコンテンツに対して作用するものです。”

重なったところを外に出す方法

その1 余白をつくる

では、重なったところを外に出すにはどうしたら良いのでしょうか？
1つ目の考え方としては、サンプルの場合、左に余白を作ることです。

サンプルでは、marginを使用しましたが、場合によってはpaddingでも良さそうですね。

その2 両方にfloatをかける

並べる要素の両方にfloat: left;をかけると横に並びました！

floatすると高さが消える？

ここで、講座でポイントになったことは、こちらです！
「floatするとOut of Normal Flowになります。」
また、むずかしそうなことを！もちろん、説明していただけます。

Normal Flow=高さがある、h1の下にh2を置くと、2つ分の高さが発生します。通常の状態ですね。
Out of Normal Flow=高さがない、floatを使用したりすると、高さがなくなり、通常ではない状態になります。

つまり、floatすると高さがなくなるということのようですね。。

さきほどのサンプルはflaotがかかっていますので、こちらは高さが0と認識されています。見た目だけだと、背景色がついているので高さがあるように見えますが。しかし、3つめのブロックを入れてみると理解しやすくなると思います。

HTML

<div id="olive">オリーブ</div>
<div id="orange">オレンジ</div>
<div id="pink">ピンク</div>

CSS

#olive { 
background: olive;
width: 140px;
height: 140px;
float: left
}
#orange {
background: orange;
width: 140px;
height: 140px;
float: right;
}
#pink {
background: pink;
width: 140px;
height: 140px;
float: left;
}

3つめの要素が、真ん中に来てしまいました。
つまり、１つ目と2つ目の高さは認識されていないのです。

ピンクだけを下にする場合は、clear: both;を使います。floatを解除しますので、下になります。 なお、以下のようにフッターに使用する頻度が高いのではないでしょうか？

今回は、floatの仕様を深く確認していきました。
忘れがちな注意はこちら。
1.必ずwidthを指定すること。
2.border、margin、paddingの幅や高さが生じていること。

しっかりと、floatについてくわしく勉強できました。

今回のおさらいです！

• 回り込んでいるのは、内包しているコンテンツであること
• floatをかけると高さがなくなること

こちらが重要なポイントですね！