[解決済み] クリアフィックスとは何ですか？

質問

最近、あるウェブサイトのコードに目を通したところ、すべての <div> には、クラス clearfix .

Googleで検索した結果、たまにIE6用であることを知ったのですが、なんと 実際に はクリアフィックスなのでしょうか？

クリアフィックスを使用したレイアウトと、使用しないレイアウトを比較した例を教えてください。

どのように解決するのですか？

IE9以下に対応する必要がなければ、フレックスボックスを自由に使うことができ、フロートレイアウトを使う必要はありません。

今日、レイアウトにフロート要素を使用することは、より優れた代替手段の使用により、ますます推奨されなくなりつつあることは注目に値します。

• 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:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

また、IE<8対応を必要としないのであれば、以下でも問題ありません。

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

通常であれば、次のようなことが必要です。

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

clearfixでは、以下のものだけが必要です。

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

でお読みください。 この記事 - Chris Coyer @ CSS-Tricksによる