どのようなメソッドの＆＃8216; clearfix＆＃8217;使ってもいいですか？

Question

2列のレイアウトをラップする div という昔からの問題があります。サイドバーがフロートしているため、コンテナ div はコンテンツとサイドバーをラップできません。

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Firefoxの明確なバグを修正する方法は多数あるようです：

• ＆lt; br clear =＆quot; all＆quot; /＆gt;
• overflow：auto
• overflow：hidden

私の状況では、正しく機能していると思われる唯一のソリューションは＆lt; br clear =＆quot; all＆quot; /＆gt; ソリューションで、これは少しだらしないです。 overflow：auto は厄介なスクロールバーを提供し、 overflow：hidden は必ず副作用がなければなりません。 また、IE7はその動作が正しくないため、この問題の影響を受けないはずですが、私の状況では、Firefoxと同じように苦しんでいます。

現在利用可能な方法のうち、最も堅牢なものはどれですか？

Answer 1

作成中の設計に応じて、以下の各clearfix CSSソリューションには独自の利点があります。

clearfixには便利なアプリケーションがありますが、ハックとしても使用されています。 clearfixを使用する前に、これらの最新のcssソリューションが役立つ可能性があります。

• css flexbox
• cssグリッド

---

最新のClearfixソリューション

---

overflow：auto;

を含むコンテナ

フロート要素をクリアする最も簡単な方法は、包含要素でスタイル overflow：auto を使用することです。このソリューションは、最新のすべてのブラウザーで機能します。

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

外部要素にマージンとパディングの特定の組み合わせを使用すると、スクロールバーが表示される可能性がありますが、これは要素を含む別の親にマージンとパディングを配置することで解決できます。

＆＃8216; overflow：hidden＆＃8217;の使用これもclearfixソリューションですが、スクロールバーはありませんが、 hidden を使用すると、含まれている要素の外側にあるコンテンツがすべてトリミングされます。

注：この例では、フロート要素は img タグですが、任意のhtml要素を使用できます。

---

Clearfix Reloaded

CSSMojoのThierry Koblentzは次のように書いています：最新のclearfixがリロードされました。彼は、oldIEのサポートを廃止することで、ソリューションを1つのcssステートメントに簡素化できることに注目しました。さらに、（ display：table の代わりに） display：block を使用すると、clearfixを持つ要素が兄弟であるときにマージンを適切に折りたたむことができます。

.container::after {
  content: "";
  display: block;
  clear: both;
}

これはclearfixの最新バージョンです。

---

＆＃8942;

＆＃8942;

以前のClearfixソリューション

以下の解決策は、最新のブラウザには必要ありませんが、古いブラウザを対象とする場合に役立つ場合があります。

これらのソリューションはブラウザのバグに依存しているため、上記のソリューションのいずれも機能しない場合にのみ使用する必要があることに注意してください。

これらはおおまかに年代順にリストされています。

---

＆quot; Beat That ClearFix＆quot ;、最新のブラウザのクリアフィックス

Thierry Koblentzの CSS Mojo は、最新のブラウザをターゲットにした場合、ドロップできるようになったことを指摘しています。 zoom および :: before のプロパティ/値を使用し、単純に使用します：

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

このソリューションは、IE 6/7および＃8230;を目的としてサポートしていません！

Thierryは以下も提供しています：＆quot; 注意事項：あなたがoldIEをサポートしていない場合でも、既存のルールによりマージンの崩壊が防止されるため、このプロジェクトをゼロから開始し、それを実行しますが、このテクニックを現在のものと交換しないでください。

---

Micro Clearfix

最新かつ世界的に採用されているclearfixソリューション、 Nicolas GallagherによるMicro Clearfix 。

既知のサポート：Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6以降

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

---

オーバーフロープロパティ

この基本的な方法は、配置されたコンテンツがコンテナの境界外に表示されない通常の場合に適しています。

http://www.quirksmode.org/css/clearing.html -この手法に関連する一般的な問題、つまりコンテナの width：100％の設定方法を説明します。

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

display プロパティを使用して＆quot; hasLayout＆quot;を設定するのではなく、 IEの場合、他のプロパティを

Answer 2

どのような問題を解決しようとしていますか

フローティングマテリアルを使用する際には、2つの重要な考慮事項があります：

1. 子孫フロートを含む。これは、問題の要素がすべての子孫をラップするのに十分な高さになることを意味します。 （外に出ることはありません。）

   

2. フロートの外側から子孫を絶縁します。これは、要素内の子孫が clear：both を使用でき、外部のフロートと相互作用しないことを意味します。要素。

   

フォーマットコンテキストのブロック

これらの両方を行う方法は1つしかありません。そして、それは新しいブロックフォーマッティングコンテキストを確立することです。ブロックフォーマットコンテキストを確立する要素は、フロートが相互作用する断熱された長方形です。ブロックフォーマッティングコンテキストは常に、浮いている子孫を視覚的にラップするのに十分な高さであり、ブロックフォーマッティングコンテキストの外側のフロートが内側の要素と相互作用することはありません。この双方向絶縁はまさにあなたが望むものです。 IEでは、この同じ概念は hasLayout と呼ばれ、 zoomを介して設定できます。 ：1 。

ブロックのフォーマットコンテキストを確立する方法はいくつかありますが、推奨される解決策は display：inline-block with width：100％です。 （もちろん、 width：100％を使用した場合の通常の注意事項があります。 、そのため box-sizing：border-box を使用するか、別の要素に padding 、 margin 、および border を配置します。）

最も堅牢なソリューション

フロートの最も一般的な用途は、おそらく2列レイアウトです。 （3列に拡張できます。）

最初にマークアップ構造。

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

そして今、CSS。

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

自分で試す

JS Bin に移動してコードを操作し、このソリューションの構築方法を確認しますゼロから始めます。

有害と見なされる従来のclearfixメソッド

従来の clearfix の問題ソリューションは、2つの異なるレンダリング概念を使用して、IEと他のすべての人に同じ目標を達成することです。 IEでは、hasLayoutを使用して新しいブロックフォーマッティングコンテキストを確立しますが、他のすべてのユーザーは、 clear：both で生成されたボックス（：after ）を使用します。ブロックフォーマットコンテキスト。つまり、すべての状況で物事が同じように動作するわけではありません。これが悪い理由の説明については、 Clearfixについて知っているすべてが間違っているを参照してください。

Inuit.css およびバーボン-非常に広く使用され、よく管理されている2つのCSS / Sassフレームワーク：

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

---

注

基本的に、clearfixは muchで提供されるflexboxレイアウトのハックであることを忘れないでくださいよりスマートな方法。 CSSフロートは、元々、インラインコンテンツ（長いテキスト記事の画像のように）が流れるように設計されており、グリッドレイアウトなどのためではありません。 ターゲットブラウザがflexboxをサポートしている場合、検討する価値があります。

これはIE7をサポートしていません。 IE7をサポートする必要はありません。そうすることで、ユーザーや組織が最新のブラウザーに切り替える圧力が軽減されるため、ユーザーは未解決のセキュリティエクスプロイトにさらされ続け、他のすべてのWeb開発者の負担が軽減されます。

このclearfixは Thierryによって発表および説明されました2012年7月にKoblentz 。 Nicolas Gallagherの2011年のmicro-clearfix から不要な重みを取り除きます。 。このプロセスでは、疑似要素を自由に使用できるようにします。これは display：table ではなく display：block を使用するように更新されました（再び、Thierry Koblentzの功績です）。

http://html5boilerplate.com/

から取得した次の使用をお勧めします

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

overflowプロパティを使用して、追加のマークアップなしでフロートをクリアできます。

.container { overflow: hidden; }

これは、IE6を除くすべてのブラウザーで機能します。IE6では、hasLayoutを有効にするだけです（ズームは私の好みの方法です）：

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

公式のCLEARFIXメソッドでバグを見つけました： DOTにはフォントサイズがありません。 そして、 height = 0 を設定し、DOMツリーの最初の要素にクラス＆quot; clearfix＆quot;がある場合ページの下部に12pxのマージンが常にあります：）

次のように修正する必要があります：

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

これはYAMLレイアウトの一部になりました...ちょっと見てみましょう-非常に面白いです！ http://www.yaml.de/en/home.html

これは非常にきちんとしたソリューションです：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

  

Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6以降で動作することが知られています

     

フロートをクリアするために：beforeセレクターを含める必要はありませんが、   しかし、最新のブラウザでトップマージンが崩壊するのを防ぎます。この   zoom：1がIE 6/7と視覚的に一貫していることを保証します   

http://nicolasgallagher.com/micro-clearfix-hack/

ブートストラップからのClearfix：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

私はただ使用します：-

.clear:after{
  clear: both;
  content: "";
  display: block;
}

IE8 +との互換性が最高です：）

投稿するつもりはなかった膨大な量の返信を考えてください。ただし、この方法は、私を助けたように、誰かを助けるかもしれません。

可能な限りフロートから離れる

言及する価値がある、私はエボラのようなフロートを避けます。多くの理由があり、私は一人ではありません。 clearfixとはについてのRikudoの回答を読んでください。彼の言葉では： ...レイアウトのためのフロート要素の使用は、より良い代替手段の使用によりますます落胆しています...

フロート以外にも他の優れた（そしてより良い）オプションがあります。技術の進歩と改善に伴い、 flexbox （およびその他の方法）が使用されています広く採用され、フロートはただの悪い記憶になります。おそらくCSS4ですか？

---

フロートの不正動作とクリアの失敗

最初に、時々、あなたはあなたの命の恩人がパンクし、あなたのhtmlフローが沈み始めるまでフロートから安全だと思うかもしれません：

下のコードペン http://codepen.io/omarjuvera/pen/jEXBya 、＆lt; div classs =＆quot; clear＆quot;＆gt;＆lt; / div＆gt; （または他の要素）を使用してフロートをクリアする方法は一般的ですが、眉をひそめて反意味論的です。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

しかし、フロートが帆にふさわしいと思ったとき...ブーム！画面サイズがますます小さくなるにつれて、次の図のような奇妙な動作が見られます（同じ http：// codepen .io / omarjuvera / pen / jEXBya ）：

気にする必要がある理由 正確な数値はわかりませんが、使用されているデバイスの約80％（またはそれ以上）が小さな画面のモバイルデバイスです。デスクトップコンピューター/ラップトップはもはや王様ではありません。

---

そこで終わりません

フロートの問題はこれだけではありません。たくさんありますが、この例では、フロートをコンテナに入れるだけでいいと言う人もいます。しかし、 codepen とグラフィックでわかるように、そうではありません。どうやら物事が最悪になったようです：

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

結果はどうですか？

これは***同じです！

少なくとも、CSSパーティーを開始し、あらゆる種類のセレクターとプロパティをパーティーに招待します。あなたが始めたものよりもあなたのCSSを大きく混乱させます。フロートを修正するだけです。

---

CSS Clearfixによる救済

このシンプルで非常に適応性の高いCSSは、美しさと「救世主」です：

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

それだけです！セマンティクスを壊すことなく実際に動作し、動作しますか：

同じサンプルから... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

＆lt; div classs =＆quot; clear＆quot;＆gt;＆lt; / div＆gt;は不要になりました＆lt;！-壁の役割を果たします-＆gt; そして、セマンティックポリスを満足させます。これが唯一の利点ではありません。このclearfixは、最も単純な形式で @media を使用せずに、あらゆる画面サイズに応答します。言い換えれば、フロートコンテナをチェックして、洪水を防ぎます。最後に、1つの小さな空手チョップで古いブラウザーをすべてサポートします=）

再びclearfixがあります

<*>

常にグリッドのメインセクションをフロートし、フッターに clear：both; を適用します。追加のdivやクラスは必要ありません。

正直に。すべてのソリューションは、レンダリングのバグを修正するためのハックのようです...私は間違っていますか？

＆lt; br clear =＆quot; all＆quot;が見つかりました。 /＆gt; を使用して、最も簡単でシンプルになります。どこでも class =＆quot; clearfix＆quot; を見ると、外部のマークアップ要素に反対する人の感性をなでることができませんか？別のキャンバスに問題をペイントしているだけです。

iは display：hidden ソリューションも使用します。このソリューションは優れており、追加のクラス宣言やhtmlマークアップを必要としません...きれいなリボンとサッシ

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

これらのソリューションをすべて試しましたが、以下のコードを使用すると、＆lt; html＆gt; 要素に大きなマージンが自動的に追加されます。

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

最後に、上記のCSSに font-size：0; を追加して、マージンの問題を解決しました。

SASSの場合、clearfixは次のとおりです。

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

そして次のように使用されます：

.container {
    @include clearfix;
}

新しいclearfixが必要な場合：

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

LESS（ http://lesscss.org/ ）を使用すると、便利なclearfixヘルパーを作成できます。

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

次に、問題のあるコンテナで使用します。例：

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

フローティングコンテナに親要素がある場合、 overflow：hidden / auto とie6の高さで十分です。

フロートをクリアするために以下で説明するHTMLのために、＃testのいずれかが動作します。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

ie6での動作を拒否する場合、フロートをクリアするには親をフロートするだけです。

#test {
  float: left; // using float to clear float
  width: 99%;
}

他の種類の清算はまだ必要ありません。多分それは私が私のHTMLを書く方法です。

#content もフロートします。これにより、両方の列にフロートが含まれます。また、サイドバーをクリアせずに #content 内の要素をクリアできるためです。

ラッパーと同じこと、2つの列をラップするためのブロックフォーマットコンテキストにする必要があります。

この記事では、使用できるいくつかのトリガーについて説明しています。 フォーマットコンテキストをブロック。

clearfixは、要素が自動的にクリアされる方法です。 追加のマークアップを追加する必要がないように。

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

通常、次のようにする必要があります。

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

clearfixを使用する必要があるのは、

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

ジョブには新しい表示値が1行で表示されます。

display: flow-root;

w3仕様から：＆quot;この要素はブロックコンテナーボックスを生成し、フローレイアウトを使用してそのコンテンツをレイアウトします。そのコンテンツに対して常に新しいブロックフォーマットコンテキストを確立します。＆quot;

情報： https://www.w3.org/TR / css-display-3 /＃valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

＆＃8251;上記のリンクに示されているように、サポートは現在制限されているため、以下のようなフォールバックサポートが役立つ場合があります。 https://github.com/fliptheweb/postcss-flow-root

css hackを使用して、HTMLの1行が何をするのか、ということです。そして、なぜセマンティックhtml tu put breakを使用して行に戻らないのですか？

私を使用する方が本当に良いです：

<br style="clear:both" />

HTMLにスタイルが必要ない場合は、ブレークにクラスを使用する必要があります。 そして .clear {clear：both; } をCSSに追加します。

この利点：

• 行に戻るためのhtmlの意味的な使用
• CSSが読み込まれない場合、動作します
• 追加のCSSコードとハックは不要
• CSSでbrをシミュレートする必要はありません。HTMLに既に存在します

このHTML構造を使用している場合：

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

使用するCSSは次のとおりです。

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

このセットは常に使用していますが、IE6でも問題なく機能します。

常に micro-clearfix を使用します：

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Cascade Framework では、ブロックレベルでデフォルトで適用します要素。 IMOは、デフォルトでブロックレベル要素に適用することで、ブロックレベル要素を従来の動作よりも直感的な動作にします。また、Cascade Framework（IE6-8と最新のブラウザーをサポート）に古いブラウザーのサポートを追加するのも簡単になりました。

他のclearfixとは異なり、ここはコンテナなしのオープンエンドのものです

その他のclearfixには、フロートされた要素が十分にマークされたコンテナにあるか、意味的に空の余分な＆lt; div＆gt; が必要です。逆に、コンテンツとマークアップを明確に分離するには、この問題に対する厳格なCSSソリューションが必要です。

フロートの終わりをマークする必要があるという単なる事実は、 無人CSS組版を許可しません 。

後者があなたの目標である場合、フロートは何でも（パラグラフ、順序付けられたリストと順序付けられていないリストなど）のために開いたままにして、「clearfix」遭遇します。たとえば、clearfixは新しい見出しで設定される場合があります。

これが、新しい見出しで次のclearfixを使用する理由です。

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

このソリューションは、私のウェブサイトで広く使用されており、問題を解決します。フローティングミニチュアの横は短く、次のクリアオブジェクトの上部マージンは考慮されません。

また、サイトから PDF を自動的に生成するときに、手動による介入を防ぎます。 。 サンプルページです。

これをCSSに入れることもできます：

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

クラス＆quot; cb＆quot;を追加します親divに：

<div id="container" class="cb">

元のコードに他のものを追加する必要はありません...

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

これを試しましたか：

<div style="clear:both;"/>

この方法で問題は発生していません。

私のお気に入りの方法は、次のようにcss / scssドキュメントにclearfixクラスを作成することです

.clearfix{
    clear:both
}

次に、以下に示すように、HTMLドキュメントで呼び出します

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

Answer 3

どのような問題を解決しようとしていますか

フローティングマテリアルを使用する際には、2つの重要な考慮事項があります：

1. 子孫フロートを含む。これは、問題の要素がすべての子孫をラップするのに十分な高さになることを意味します。 （外に出ることはありません。）

   

2. フロートの外側から子孫を絶縁します。これは、要素内の子孫が clear：both を使用でき、外部のフロートと相互作用しないことを意味します。要素。

   

フォーマットコンテキストのブロック

これらの両方を行う方法は1つしかありません。そして、それは新しいブロックフォーマッティングコンテキストを確立することです。ブロックフォーマットコンテキストを確立する要素は、フロートが相互作用する断熱された長方形です。ブロックフォーマッティングコンテキストは常に、浮いている子孫を視覚的にラップするのに十分な高さであり、ブロックフォーマッティングコンテキストの外側のフロートが内側の要素と相互作用することはありません。この双方向絶縁はまさにあなたが望むものです。 IEでは、この同じ概念は hasLayout と呼ばれ、 zoomを介して設定できます。 ：1 。

ブロックのフォーマットコンテキストを確立する方法はいくつかありますが、推奨される解決策は display：inline-block with width：100％です。 （もちろん、 width：100％を使用した場合の通常の注意事項があります。 、そのため box-sizing：border-box を使用するか、別の要素に padding 、 margin 、および border を配置します。）

最も堅牢なソリューション

フロートの最も一般的な用途は、おそらく2列レイアウトです。 （3列に拡張できます。）

最初にマークアップ構造。

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

そして今、CSS。

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

自分で試す

JS Bin に移動してコードを操作し、このソリューションの構築方法を確認しますゼロから始めます。

有害と見なされる従来のclearfixメソッド

従来の clearfix の問題ソリューションは、2つの異なるレンダリング概念を使用して、IEと他のすべての人に同じ目標を達成することです。 IEでは、hasLayoutを使用して新しいブロックフォーマッティングコンテキストを確立しますが、他のすべてのユーザーは、 clear：both で生成されたボックス（：after ）を使用します。ブロックフォーマットコンテキスト。つまり、すべての状況で物事が同じように動作するわけではありません。これが悪い理由の説明については、 Clearfixについて知っているすべてが間違っているを参照してください。

Answer 4

Inuit.css およびバーボン-非常に広く使用され、よく管理されている2つのCSS / Sassフレームワーク：

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

---

注

基本的に、clearfixは muchで提供されるflexboxレイアウトのハックであることを忘れないでくださいよりスマートな方法。 CSSフロートは、元々、インラインコンテンツ（長いテキスト記事の画像のように）が流れるように設計されており、グリッドレイアウトなどのためではありません。 ターゲットブラウザがflexboxをサポートしている場合、検討する価値があります。

これはIE7をサポートしていません。 IE7をサポートする必要はありません。そうすることで、ユーザーや組織が最新のブラウザーに切り替える圧力が軽減されるため、ユーザーは未解決のセキュリティエクスプロイトにさらされ続け、他のすべてのWeb開発者の負担が軽減されます。

このclearfixは Thierryによって発表および説明されました2012年7月にKoblentz 。 Nicolas Gallagherの2011年のmicro-clearfix から不要な重みを取り除きます。 。このプロセスでは、疑似要素を自由に使用できるようにします。これは display：table ではなく display：block を使用するように更新されました（再び、Thierry Koblentzの功績です）。

Answer 5

http://html5boilerplate.com/

から取得した次の使用をお勧めします

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Answer 6

overflowプロパティを使用して、追加のマークアップなしでフロートをクリアできます。

.container { overflow: hidden; }

これは、IE6を除くすべてのブラウザーで機能します。IE6では、hasLayoutを有効にするだけです（ズームは私の好みの方法です）：

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Answer 7

公式のCLEARFIXメソッドでバグを見つけました： DOTにはフォントサイズがありません。 そして、 height = 0 を設定し、DOMツリーの最初の要素にクラス＆quot; clearfix＆quot;がある場合ページの下部に12pxのマージンが常にあります：）

次のように修正する必要があります：

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

これはYAMLレイアウトの一部になりました...ちょっと見てみましょう-非常に面白いです！ http://www.yaml.de/en/home.html

Answer 8

これは非常にきちんとしたソリューションです：

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

  

Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6以降で動作することが知られています

     

フロートをクリアするために：beforeセレクターを含める必要はありませんが、   しかし、最新のブラウザでトップマージンが崩壊するのを防ぎます。この   zoom：1がIE 6/7と視覚的に一貫していることを保証します   

http://nicolasgallagher.com/micro-clearfix-hack/

Answer 9

ブートストラップからのClearfix：

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Answer 10

私はただ使用します：-

.clear:after{
  clear: both;
  content: "";
  display: block;
}

IE8 +との互換性が最高です：）

Answer 11

投稿するつもりはなかった膨大な量の返信を考えてください。ただし、この方法は、私を助けたように、誰かを助けるかもしれません。

可能な限りフロートから離れる

言及する価値がある、私はエボラのようなフロートを避けます。多くの理由があり、私は一人ではありません。 clearfixとはについてのRikudoの回答を読んでください。彼の言葉では： ...レイアウトのためのフロート要素の使用は、より良い代替手段の使用によりますます落胆しています...

フロート以外にも他の優れた（そしてより良い）オプションがあります。技術の進歩と改善に伴い、 flexbox （およびその他の方法）が使用されています広く採用され、フロートはただの悪い記憶になります。おそらくCSS4ですか？

---

フロートの不正動作とクリアの失敗

最初に、時々、あなたはあなたの命の恩人がパンクし、あなたのhtmlフローが沈み始めるまでフロートから安全だと思うかもしれません：

下のコードペン http://codepen.io/omarjuvera/pen/jEXBya 、＆lt; div classs =＆quot; clear＆quot;＆gt;＆lt; / div＆gt; （または他の要素）を使用してフロートをクリアする方法は一般的ですが、眉をひそめて反意味論的です。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

しかし、フロートが帆にふさわしいと思ったとき...ブーム！画面サイズがますます小さくなるにつれて、次の図のような奇妙な動作が見られます（同じ http：// codepen .io / omarjuvera / pen / jEXBya ）：

気にする必要がある理由 正確な数値はわかりませんが、使用されているデバイスの約80％（またはそれ以上）が小さな画面のモバイルデバイスです。デスクトップコンピューター/ラップトップはもはや王様ではありません。

---

そこで終わりません

フロートの問題はこれだけではありません。たくさんありますが、この例では、フロートをコンテナに入れるだけでいいと言う人もいます。しかし、 codepen とグラフィックでわかるように、そうではありません。どうやら物事が最悪になったようです：

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

結果はどうですか？

これは***同じです！

少なくとも、CSSパーティーを開始し、あらゆる種類のセレクターとプロパティをパーティーに招待します。あなたが始めたものよりもあなたのCSSを大きく混乱させます。フロートを修正するだけです。

---

CSS Clearfixによる救済

このシンプルで非常に適応性の高いCSSは、美しさと「救世主」です：

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

それだけです！セマンティクスを壊すことなく実際に動作し、動作しますか：

同じサンプルから... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

＆lt; div classs =＆quot; clear＆quot;＆gt;＆lt; / div＆gt;は不要になりました＆lt;！-壁の役割を果たします-＆gt; そして、セマンティックポリスを満足させます。これが唯一の利点ではありません。このclearfixは、最も単純な形式で @media を使用せずに、あらゆる画面サイズに応答します。言い換えれば、フロートコンテナをチェックして、洪水を防ぎます。最後に、1つの小さな空手チョップで古いブラウザーをすべてサポートします=）

再びclearfixがあります

<*>

Answer 12

常にグリッドのメインセクションをフロートし、フッターに clear：both; を適用します。追加のdivやクラスは必要ありません。

Answer 13

正直に。すべてのソリューションは、レンダリングのバグを修正するためのハックのようです...私は間違っていますか？

＆lt; br clear =＆quot; all＆quot;が見つかりました。 /＆gt; を使用して、最も簡単でシンプルになります。どこでも class =＆quot; clearfix＆quot; を見ると、外部のマークアップ要素に反対する人の感性をなでることができませんか？別のキャンバスに問題をペイントしているだけです。

iは display：hidden ソリューションも使用します。このソリューションは優れており、追加のクラス宣言やhtmlマークアップを必要としません...きれいなリボンとサッシ

Answer 14

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

Answer 15

これらのソリューションをすべて試しましたが、以下のコードを使用すると、＆lt; html＆gt; 要素に大きなマージンが自動的に追加されます。

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

最後に、上記のCSSに font-size：0; を追加して、マージンの問題を解決しました。

Answer 16

SASSの場合、clearfixは次のとおりです。

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

そして次のように使用されます：

.container {
    @include clearfix;
}

新しいclearfixが必要な場合：

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Answer 17

LESS（ http://lesscss.org/ ）を使用すると、便利なclearfixヘルパーを作成できます。

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

次に、問題のあるコンテナで使用します。例：

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Answer 18

フローティングコンテナに親要素がある場合、 overflow：hidden / auto とie6の高さで十分です。

フロートをクリアするために以下で説明するHTMLのために、＃testのいずれかが動作します。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

ie6での動作を拒否する場合、フロートをクリアするには親をフロートするだけです。

#test {
  float: left; // using float to clear float
  width: 99%;
}

他の種類の清算はまだ必要ありません。多分それは私が私のHTMLを書く方法です。

Answer 19

#content もフロートします。これにより、両方の列にフロートが含まれます。また、サイドバーをクリアせずに #content 内の要素をクリアできるためです。

ラッパーと同じこと、2つの列をラップするためのブロックフォーマットコンテキストにする必要があります。

この記事では、使用できるいくつかのトリガーについて説明しています。 フォーマットコンテキストをブロック。

Answer 20

clearfixは、要素が自動的にクリアされる方法です。 追加のマークアップを追加する必要がないように。

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

通常、次のようにする必要があります。

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

clearfixを使用する必要があるのは、

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

Answer 21

ジョブには新しい表示値が1行で表示されます。

display: flow-root;

w3仕様から：＆quot;この要素はブロックコンテナーボックスを生成し、フローレイアウトを使用してそのコンテンツをレイアウトします。そのコンテンツに対して常に新しいブロックフォーマットコンテキストを確立します。＆quot;

情報： https://www.w3.org/TR / css-display-3 /＃valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

＆＃8251;上記のリンクに示されているように、サポートは現在制限されているため、以下のようなフォールバックサポートが役立つ場合があります。 https://github.com/fliptheweb/postcss-flow-root

Answer 22

css hackを使用して、HTMLの1行が何をするのか、ということです。そして、なぜセマンティックhtml tu put breakを使用して行に戻らないのですか？

私を使用する方が本当に良いです：

<br style="clear:both" />

HTMLにスタイルが必要ない場合は、ブレークにクラスを使用する必要があります。 そして .clear {clear：both; } をCSSに追加します。

この利点：

• 行に戻るためのhtmlの意味的な使用
• CSSが読み込まれない場合、動作します
• 追加のCSSコードとハックは不要
• CSSでbrをシミュレートする必要はありません。HTMLに既に存在します

Answer 23

このHTML構造を使用している場合：

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

使用するCSSは次のとおりです。

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

このセットは常に使用していますが、IE6でも問題なく機能します。

Answer 24

常に micro-clearfix を使用します：

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Cascade Framework では、ブロックレベルでデフォルトで適用します要素。 IMOは、デフォルトでブロックレベル要素に適用することで、ブロックレベル要素を従来の動作よりも直感的な動作にします。また、Cascade Framework（IE6-8と最新のブラウザーをサポート）に古いブラウザーのサポートを追加するのも簡単になりました。

Answer 25

他のclearfixとは異なり、ここはコンテナなしのオープンエンドのものです

その他のclearfixには、フロートされた要素が十分にマークされたコンテナにあるか、意味的に空の余分な＆lt; div＆gt; が必要です。逆に、コンテンツとマークアップを明確に分離するには、この問題に対する厳格なCSSソリューションが必要です。

フロートの終わりをマークする必要があるという単なる事実は、 無人CSS組版を許可しません 。

後者があなたの目標である場合、フロートは何でも（パラグラフ、順序付けられたリストと順序付けられていないリストなど）のために開いたままにして、「clearfix」遭遇します。たとえば、clearfixは新しい見出しで設定される場合があります。

これが、新しい見出しで次のclearfixを使用する理由です。

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

このソリューションは、私のウェブサイトで広く使用されており、問題を解決します。フローティングミニチュアの横は短く、次のクリアオブジェクトの上部マージンは考慮されません。

また、サイトから PDF を自動的に生成するときに、手動による介入を防ぎます。 。 サンプルページです。

Answer 26

これをCSSに入れることもできます：

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

クラス＆quot; cb＆quot;を追加します親divに：

<div id="container" class="cb">

元のコードに他のものを追加する必要はありません...

Answer 27

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

Answer 28

これを試しましたか：

<div style="clear:both;"/>

この方法で問題は発生していません。

Answer 29

私のお気に入りの方法は、次のようにcss / scssドキュメントにclearfixクラスを作成することです

.clearfix{
    clear:both
}

次に、以下に示すように、HTMLドキュメントで呼び出します

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>