CSS WEB制作

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

block-pile-up

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

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

 

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

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

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

 

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

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

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

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

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

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

 

 

 

なぜ潜り込みが起きるか

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

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

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

 

 

 

解決コード

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

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

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

 

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

https://arts-factory.net/float/

 

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

line-up
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法

続きを見る

-CSS, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5