【CSS】floatした要素の親要素に高さを認識させる2つの方法

【CSS】floatした要素の親要素に高さを認識させる2つの方法

今回もCSSで本当によくある失敗ですね。

Webデザインを始めた人はかなりの確率でfloat問題にひっかかると思いますので、初心者の方で知らなかった・・・!という方がいたらぜひ覚えておいてください。

スポンサーリンク

floatすると表示崩れる問題

floatしたら表示崩れる・・・なぜ・・・というの、よくありますよね。

これはfloatは「浮く」という意味そのまんまで、floatを指定した要素は浮いている状態と同じなので、その後にある要素が入り込んだりします。

「floatした要素は浮いて高さが認識されないから、表示が崩れる」ということです。

積み木があって、一部だけひゅっと浮かせたら他がガラガラと崩れますよね。そんなイメージだとわかりやすいかと思います。

float使用時の失敗例

図にするとこんな感じでしょうか。

本当は右側のようにfloatした要素もしっかり親要素(グレー)に認識されて、その後にある要素も入り込まずにきれいに配置したいですよね。

でも何も処理しないと左図のように、親要素(グレー)がfloatの高さを認識してくれずはみ出してしまったり、後に続く要素(ピンク)が入り込んだりします。

実際に再現してみました。

See the Pen float崩れを直すその1< by tatsuya nakafuji (@handywebdesign) on CodePen.

単純にfloatをしただけだと例のようにレイアウトが崩れてしまうのがわかると思います。

「なんか表示がいきなり崩れた!なんで!?」となった時は、floatをちゃんと処理しているか覚えておくとすぐ解決できそうですね。

floatの高さを親要素に認識させる2つの方法

ではfloatの高さを親要素に認識させるには、どうしたらいいんでしょうか?

解決方法は主に2つです。

overflow: hidden;を使う

1つ目の方法は、floatを使った要素の親要素(図でいうとグレーの部分)に

overflow: hidden;

のCSSを記述すると、floatした要素の高さを認識してくれます。ちなみにoverflow: auto;でも良いです。

ちなみに親要素にoverflow:hidden;を使うと、親要素からはみ出て表示させたい要素があった場合は隠れてしまいますので、そのあたり注意したほうがいいと思います。特にそういった要素がない時に使える方法ですね。

最初に再現で見えたコードの親要素に、overflow:hidden;を実際に使ってみたいと思います。

See the Pen float崩れを直すその2 by tatsuya nakafuji (@handywebdesign) on CodePen.

親要素に追記するだけで、すぐに表示崩れが直りました!

clearfixを使う

もう一つの方法は、floatした要素の親要素にclearfixのクラス名を入れる方法です。

clear: both;

を使うことで、floatした要素のあとに続く要素の回り込みを解除することができるんですが、これを親要素のあとにくるように擬似的に設定します。

See the Pen floatの表示崩れをなおす3 by tatsuya nakafuji (@handywebdesign) on CodePen.

親要素にclearfixのクラス名をつけて、例のように記述すると同じようにfloatした要素の高さを含むことができます。この方法でも表示崩れが直ります。

今はfloatを使わなくても横並びにできるCSSができたので、使う機会が少し少なくなったようにも思いますが、floatがなくなったわけではないので覚えておくと役に立つと思います。

スポンサーリンク

SNS・feed登録はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です