HTML/CSS floatでレイアウトが崩れる
はじめに
HTML/CSSを学ぶ初心者の躓きポイントとして、floatの挙動が理解できず、レイアウトが崩壊してしまう、ということがあると思います。
例に漏れず、僕自身がそうなのですが、いい加減にちゃんと理解しておきたいと思い、記事を書くにいたります。
floatの仕様について
floatはCSSのプロパティです。
プロパティを指定した要素は左右どちらかに設置され、他の要素はその要素を回り込むように設置されます。
ネットで調べるとよく、「要素を左または右に浮かせる」 とでてきますが、実際浮かせる、浮くとはどう意味なんでしょうか。
通常、HTML要素は上から下へ、左から右へ流れるように配置されます。
この理から外れ、左端、右端に配置することを浮くと表現しているようです。
浮いてるイメージ
確認
実際に動きを確認してみましょう。
テストコードを用意します。
<body>
<div class="content">
<div class="num1">要素A</div>
<div class="num2">要素B</div>
<div class="num3">要素C</div>
</div>
</body>
.content{
background-color: #8b8b8b;
}
.num1{
width: 200px;
height: 200px;
background-color: #ec5656;
color: white;
}
.num2{
width: 200px;
height: 200px;
background-color: #d3e454;
color: white;
}
.num3{
width: 200px;
height: 200px;
background-color: #1c4077;
color: white;
}
まずは、num1にfloat:left;を適応してみます。
・画面左上にnum1が設置される。（この要素は浮いている）
・浮いているnum1の下に重なるように、num2が設置される。
・その際に、num2の持つテキスト、「要素B」は行き場をなくして、下に弾き飛ばされる。
（テキストが重なって分かりづらいですが）
・num2の下にnum3が設置される。
という動きになっています。これを要素が回り込むと表現していることが多いですね！
次はnum1~num3全てにfloat:leftを適応します。
横並びにはなったが、コンテンツが消えている・・・
もちろん横並びに配置されます。
しかし、contentのバックグラウンドカラーであるグレーが消えてしまいました。
これはどういうことかというと、
<div class="content">
<div class="num1">要素A</div>
<div class="num2">要素B</div>
<div class="num3">要素C</div>
</div>
<!-- content内の要素がfloatにより、浮くことで
contentが内包する要素がなくなり高さが0pxになっている -->
子の要素の高さに依存してるわけですね。
clearプロパティについて
さて、こういった意図しない回り込みをさせないために解除するためのプロパティがclearです。
clear:both; 【左寄せも右寄せも解除】
clear:left; 【左寄せされた要素に対する解除】
clear:right;【右寄せされた要素に対する解除】
試してみましょう。
num1,num2にはfloat:leftを適応し、num3には適応しません。
こうですね。
num1の下にnum3が配置されている状態です（気になる方はnum1にopacityを適応すると分かりやすいです）
num3にclear:both;を適応します。
このように回り込みが発生せず、下に配置されるようになりました。
まとめ
・floatは要素を浮かして、左右どちらかに配置する
┗ブロック要素はその下に重なるように配置され、インライン要素は回り込むように配置される。
・floatの回り込みを解除して配置したい場合は、clearプロパティを使用する。
floatを使用する際はこのような動きのイメージを持たないと、レイアウトが総崩れになってしまうので注意して使いたいですね。
参考：
CSSの【float】についてちょっと本気出して説明してみた。
【CSS入門】floatとclearを初心者向けに解説・実践！ #09
Discussion