【CSS】floatを設定したら下の要素が入り込んできた！を解決します

要素の横並びは flex を使う人がほとんどだと思いますが、今回は「float」のエラー解決を紹介します。

floatを使ったはいいが、floatを指定した要素に、下の要素が入りこんできた！なんてことはないでしょうか。

これはfloatを指定された要素が「浮いた状態」になるため、下の要素が上に詰めてきて入り込んでくる現象です。

簡単に解決できますので安心してください。

潜り込ませたくない要素に clear:both; を指定すれば解決です。

詳しく見ていきましょう。

floatを設定すると浮いた状態になる

イメージとしてはこのような状況。

３つのボックスが並んでいます。

本当は緑のボックスもあるのですが、緑のボックスにはfloatを設定していませんのでこの３つの裏側に潜りんでしまっている状態です。

See the Pen
float by t.h (@tomtom15)
on CodePen.

ＨＴＭＬの性質上、要素は上に上に詰めるようになっています。

例えば、お店に客の行列があって、前の人が行列から抜けたら、その分詰めますよね。
それと一緒です。（例え方下手だな（汗））

floatを指定されると、「浮いた状態」になり、次の要素はその浮いた分詰めようとしますので、潜り込みが起きるのです。

潜り込みをさせたくない要素に対して、clear:both;　を設定してあげましょう。

隠れていた緑のボックスが表示されました。

解除の方法は他にもいろいろあるので、詳しく知りたい方はこちらもどうぞ。

横並びはflexを使う機会が多いと思うので関連記事も紹介します。