はじめに

現在自分はHTML・CSSモダンコーディングという技術書を使ってHTML・CSSの復習をしております。
この記事はその復習のアウトプットです。

clearfixとは

clearfixというのは、floatプロパティを使用した場合、親要素に高さが反映されずに潰れてしまう現象を改善するための技術です。

clearfixクラスを親要素に追加してあげることで、親要素ないの最後にclearプロパティが適応してあるdiv要素が追加されます。それによりfloatの効果が打ち消されて親要素が潰れる現象を防ぎます。

実際にclearfixクラスを記述してみると....

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

<div class='main clearfix'></div>

擬似クラスafterを使うことで、このクラスを追加した要素ないの最後にdiv要素を追加します。