クリアフィックスとは何ですか？質問する

IE9 以下をサポートする必要がない場合は、flexbox を自由に使用でき、フロート レイアウトを使用する必要はありません。

注目すべきは、今日では、レイアウトにフロート要素を使用することは、より優れた代替手段の使用により、ますます推奨されなくなってきているということです。

• display: inline-block- より良い
• フレックスボックス- 最高（ただしブラウザのサポートは限られている）

Flexbox は、Firefox 18、Chrome 21、Opera 12.10、Internet Explorer 10、Safari 6.1 (Mobile Safari を含む)、Android のデフォルト ブラウザー 4.4 でサポートされています。

詳細なブラウザリストについては以下を参照してください。https://caniuse.com/flexbox。

(おそらく、位置が完全に確立されると、要素を配置する絶対的に推奨される方法になるかもしれません。)

clearfix は、要素が子要素を自動的にクリアする方法です。これにより、追加のマークアップを追加する必要がなくなります。これは通常、要素がフロートされて水平に積み重ねられるフロート レイアウトで使用されます。

クリアフィックスは、高さゼロのコンテナ問題フロート要素の場合

Clearfix は次のように実行されます。

.clearfix::after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

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

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>