HTML / CSS

中級編:clearfixについて、きちんと説明できますか?

なんとなく書いているだけのclearfixを、きちんと理解しましょう。

問題: 1

※初級編がまだの方は、以下の問題を先に解いてみてください。
初級編:clearfixを書いてみよう。


はじめに:


今回は、floatの潜り込みを解除するための代表的な以下のclearfixについて考えます。


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

普段このクラスをなんとなく書いて使いまわしているだけの人も多いのではないでしょうか?この機会にこれについてきちんと理解してみましょう。


それでは問題です。


:after と content: ""; の関係について説明してください。

問題: 2

続きまして第2問。clearfixの中核となる部分です。


clear: both; について説明してください。

問題: 3

最後の問題です。


display: block; をつけなければならない理由を説明してください。


いかがでしたか?
自分の答えが準備出来たら、「解答を見る」に進んでください