web-dev-qa-db-ja.com

clearfixとは何ですか？

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

Googleで簡単に検索したところ、IE6の場合があることがわかりましたが、実際のは何を意味するのですか。

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

htmlcsslayoutcross-browserclearfix
940
H Bellamy

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

今日、レイアウトのために浮動要素を使用することは、より良い代替手段を使用することによってますます落胆していることに注目する価値があります。

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

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

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

（おそらくその位置が完全に確立されれば、それは要素をレイアウトするための絶対に推奨される方法かもしれません。）

Clearfix Image

Clearfixは要素がになることで自動的にその子要素をクリアするので、追加のマークアップを追加する必要はありません。通常、要素が水平方向に積み重ねられるようにフローティングされるフロートレイアウトで使用されます。

明確な修正は、浮遊要素に対して高さ0のコンテナ問題と戦う方法です。

クリアフィックスは以下のように実行されます。

.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

909
Madara Uchiha

あなたが視覚化することによって学ぶならば、この絵はあなたがclearfixが何をするか理解するのを助けるかもしれません。

enter image description here

445
kyo

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

最近のブラウザではflexboxのような名前の下でさらに便利なレイアウトメカニズムが登場していますが、最近ではdisplay: inline-blockは堅実な選択肢です（ IE6とIE7 を除く）グリッドレイアウトなど.

63
Domenic

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;
}
34
John Slegers

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

新しいCSS 3ディスプレイプロパティは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>
13
Kir Kanos

簡単に言えば、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) */
}

参照

11
JRulle

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

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

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

5
Nathan Taylor

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>

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

2
Dan W

私は受け入れられた答えを試してみましたが、私はまだコンテンツの配置に問題がありました。以下のように "：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;
}
1
DevWL

ここでは異なる方法は同じですが少し異なります

違いは\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}
0
Val