clearfix について html css

エラー内容 このようにdivで囲んでいるはずなのに、背景が認識しない。

floatが邪魔している

これをclearfixというクラスをあてて修正する。

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

疑似要素の:afterを指定 疑似要素とは::afterと書くことにより、その直後になにか記載したい時に使用する。 ちなみに::beforeだと直前に挿入する。

::はCSS3の書き方

ここでは

// なにもない空要素を追加 これにより入力があると認識される。
 content: " ";

//これによりカラム落ちがなくなる
display: table;

//floatを打ち消す
clear: both