XXとしてる: CSSを触っていてレイアウトが崩れたので、その対処方法メモ

floatプロパティを指定しているときそのまま親タグを閉じてしまうと、レイアウトが崩れてしまった。CSS初心者あるあるみたいで、その解決方法はこちらのサイトが詳しいので、そちらを見た方がいい。

目指しているレイアウト

崩れてしまった現実.下が崩れたのは別の原因なので関係ない。

結論

float指定したら、疑似要素を利用して最後にはclearプロパティを使ってfloatの効果を無効化しよう。

floatを指定したら、親タグはそのタグを高さ計算に含めない仕様となっているから。
そう策定されているので従う他ないので、解決策を下に書いていく。

空タグをfloatを無効化したい部分(今回の場合は最後)に入れて、cssでclear:bothを指定して上げるとOK。
学習サイトではこちらの方法を教えていたので、はじめはこちらを使っていたが、下の方法がよりスマートである。

cssに.hogehoge:afterと書くと、そのcssを指定されたタグの末尾へ自動的に.hogehoge:afterでスタイルされたタグを追加してくれる。便利機能。

これを使うとHTMLに余計なタグを追加する必要がなくなってよりよい感じになる。

(下にあるタグの親の高さが0になっている状態…)

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

:afterは疑似要素と呼ばれるもので他にも:beforeとかある。もう一度上げるがこちらのサイトが詳しい。疑似要素を利用したテクニックを紹介しているので参考になる。

floatプロパティを使うとCSSの仕様上、レイアウトが崩れてしまうケースがでてくるので、floatを適応させたい部分の末尾にはclearプロパティでfloatの効果を無効化しておく。

そのさい、htmlに空タグを追加するのではなく、疑似要素である:afterを使うとhtmlがきれいに保てる。