1055

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

Google で簡単に検索したところ、時々 IE6 用であることがわかりましたが、実際には clearfix とは何ですか?

clearfix を使用しないレイアウトと比較して、clearfix を使用するレイアウトの例をいくつか挙げていただけますか?

4

9 に答える 9

1027

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 からサポートされています。

詳細なブラウザー リストについては、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

于 2011-12-18T19:04:24.703 に答える
72

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

最近では ( IE6 と IE7 を除いてdisplay: inline-block)確実な代替手段になっていますが、最新のブラウザーには、フレックスボックス、グリッド レイアウトなどの名前でさらに便利なレイアウト メカニズムが搭載されています。

于 2011-12-18T19:08:39.700 に答える
46

を使用clearfixすると、コンテナーはフローティングされた子をラップできます。aclearfixまたは同等のスタイル設定がないと、コンテナーは、フロートされた子が絶対的に配置されているかのように、フロートされた子をラップせず、折りたたまれません。

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;
}
于 2014-04-18T09:35:45.130 に答える
11

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

参照

于 2014-12-17T02:27:52.583 に答える
6

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

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

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

于 2011-12-18T19:09:41.933 に答える
3

受け入れられた回答を試しましたが、コンテンツの配置にまだ問題がありました。以下に示すように「: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;
}
于 2016-01-13T00:56:39.190 に答える
1

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>

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

于 2015-04-19T08:39:11.513 に答える
-1

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

\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}
于 2012-09-20T09:17:10.090 に答える