この動画内で、親要素の背景色を反映させるために以下のようなコードを使用しています。

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

ここでは、疑似要素に after を使用していると思いますが、before に変えてみたところ main の背景色が反映されませんでした。なぜ before だとダメなのでしょうか？