プログラミング

【CSS】floatを設定したけど、その下の要素が、隙間に回り込んできた! を解決します

スポンサーリンク

フロート

Web制作をするうえで、要素を横並びにするために「float」を使うことは良くあると思います。

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

<やりたい配置>
要素A 要素B 要素C (1段目はfloatで並べる)
要素D(要素Dは2段目)

<要素Dが上(1段目)に回り込んできた>
要素A 要素B 要素C 要素D

こんなイメージです。

 

なぜ回り込みが起きるか

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

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

floatを指定されると、「浮いた状態」になるということです。

次の要素は、その浮いた分詰めようとしますので、回り込みが起きるのです。

 

解決

回り込みをさせたくない要素に対して、

スタイルシートで、 clear:both; を設定してあげましょう。

 

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

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

スポンサーリンク

-プログラミング
-, , , , ,

© 2022 サカらいふ Powered by AFFINGER5