clearfixとは何ですか？

最近、私はいくつかのウェブサイトのコードを調べて<div> いて、すべてにクラスがあることがわかりましたclearfix。

Googleで簡単に検索したところ、IE6用である場合があることを知りましたが、実際のクリアフィックスとは何ですか？

クリアフィックスのないレイアウトと比較して、クリアフィックスのあるレイアウトの例をいくつか教えていただけますか？

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

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

• display: inline-block -より良い
• Flexbox-最高（ただし、ブラウザのサポートは限定的）

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は次のように実行されます。

.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

他の答えは正しいです。しかし、それは人々が最初にCSSを学び、floatすべてのレイアウトを行うために悪用された時の遺物であることを付け加えたいと思います。float長いテキストの横でフロート画像のようなことをすることを意図していますが、多くの人々はそれを主要なレイアウトメカニズムとして使用しました。それは実際にはそのためのものではなかったので、それを機能させるには「clearfix」のようなハックが必要です。

これらの日display: inline-block（固体代替でIE6とIE7を除く、より近代的なブラウザでは、などフレキシボックス、グリッドレイアウト、のような名前の下にさらに便利なレイアウトメカニズムに来ているが、）

clearfixコンテナが浮いて子供をラップすることができます。なければclearfixまたは同等のスタイリング、コンテナは、その浮いた子供たちは絶対に配置した場合と同様に、その浮いた子供や崩壊をラップアラウンドしません。

clearfixにはいくつかのバージョンがあり、主要な作者はNicolas GallagherとThierry Koblentzです。

古いブラウザのサポートが必要な場合は、このclearfixを使用するのが最善です。

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSSでは、次の手法を使用できます。

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

古いブラウザをサポートする必要がない場合は、短いバージョンがあります。

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

2017年の第2四半期の状況に関する最新情報を提供します。

新しいCSS3表示プロパティは、Firefox 53、Chrome 58およびOpera 45で利用できます。

.clearfix {
   display: flow-root;
}

ここでブラウザの可用性を確認してください：http : //caniuse.com/#feat=flow-root

要素（displayプロパティをflow-rootに設定）は、ブロックコンテナーボックスを生成し、フローレイアウトを使用してそのコンテンツをレイアウトします。それは常にその内容のための新しいブロックフォーマットコンテキストを確立します。

つまり、1つまたは複数のフローティング子を含む親divを使用する場合、このプロパティは、親がそのすべての子を確実に囲むようにします。clearfixハックの必要はありません。すべての子、または最後のダミー要素でさえ（最後の子で：beforeでclearfixバリアントを使用していた場合）。

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

簡単に言うと、clearfixはハックです。

これは、フロートした子要素が親からオーバーフローしないようにするための実際に唯一の合理的な方法であるため、私たち全員が一緒に暮らさなければならない醜いものの1つです。他にもさまざまなレイアウトスキームがありますが、今日のWebデザイン/開発ではフローティングはあまりにも一般的であり、clearfixハックの価値を無視することはできません。

私は個人的にMicro Clearfixソリューション（Nicolas Gallagher）に傾いています

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

参照

CSSフロートベースのレイアウトで一般的に使用される手法は、フローティング要素が含まれることがわかっている要素に少数のCSSプロパティを割り当てることです。と呼ばれるクラス定義を使用して一般的に実装される手法はclearfix、（通常）次のCSS動作を実装します。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

これらの組み合わされた動作の目的は:after、単一の「。」を含むアクティブな要素のコンテナを作成することです。すべての既存のフロートをクリアし、次のコンテンツのページを効果的にリセットする非表示としてマークされます。

clearfixを実現するためのもう1つの（そしておそらく最も単純な）オプションはoverflow:hidden;、包含要素で使用することです。例えば

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

もちろん、これはコンテンツがオーバーフローしたくない場合にのみ使用できます。

受け入れられた回答を試してみましたが、コンテンツの配置にまだ問題がありました。以下に示すように「：before」セレクターを追加すると、問題が修正されました。

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

上記のLESSは、以下のCSSにコンパイルされます。

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

ここでは別の方法と同じですが少し異なります

違いは、\00A0==で置き換えられるコンテンツドットです。whitespace

この詳細http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

ここにそれのコンパクトバージョンがあります...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}