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

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

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

• <br clear="all"/>
• overflow:auto
• overflow:hidden

私の状況では、正しく機能しているように見えるの<br clear="all"/>は、少しだらしないソリューションのみです。overflow:auto私に厄介なスクロールバーを与えて、overflow:hidden確かに副作用があるはずです。また、IE7は動作が正しくないため、明らかにこの問題の影響を受けるべきではありませんが、私の状況では、Firefoxと同じ問題が発生しています。

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

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

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

• CSSフレックスボックス
• 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>

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

'overflow：hidden'を使用することもclearfixソリューションですが、スクロールバーはありませんが、使用hiddenすると、含まれている要素の外側にあるコンテンツが切り取られます。

注：imgこの例では、floated要素はタグですが、任意のhtml要素にすることができます。

Clearfix Reloaded

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

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

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

⋮

⋮

古いClearfixソリューション

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

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

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

「Beat That ClearFix」、最新のブラウザーのクリアフィックス

CSS Mojoの Thierry Koblentz氏は、最新のブラウザーを対象とする場合、zoomおよび::beforeプロパティ/値を削除して、次のように使用できることを指摘しています。

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

このソリューションは、意図的にIE 6/7をサポートしていません。

ティエリーも申し出：「注意の言葉：あなたはそれのために行く、ゼロから新しいプロジェクトを開始、しかし、あなたはをoldIEをサポートしていないにもかかわらず、既存のルールを防ぐために、あなたが今持っている1と、この技術を交換していない場合マージンの崩壊。」

マイクロ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プロパティを使用してIEの「hasLayout」を設定する代わりに、要素の「hasLayout」をトリガーするために他のプロパティを使用できます。

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

overflowプロパティを使用してフロートをクリアする別の方法は、アンダースコアハックを使用することです。IEはアンダースコアが前に付いた値を適用しますが、他のブラウザは適用しません。zoomプロパティは、トリガーhasLayoutを IEに：

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

これは機能しますが、ハックを使用することは理想的ではありません。

PIE：簡単な決済方法

この古い "Easy Clearing"メソッドには、配置された要素をコンテナの境界の外にぶら下げることができるという利点がありますが、より複雑なCSSが必要になります。

このソリューションはかなり古いですが、Position Is EverythingのEasy Clearingについてすべて学ぶことができます。http：//www.positioniseverything.net/easyclearing.html

「クリア」プロパティを使用する要素

何かをすばやく平手打ちするときの（いくつかの欠点を伴う）迅速で汚れたソリューション：

<br style="clear: both" /> <!-- So dirty! -->

欠点

• メディアクエリに基づいてレイアウトスタイルが変更されると、応答が遅くなるため、望ましい効果が得られない可能性があります。純粋なCSSのソリューションがより理想的です。
• セマンティック値を必ずしも追加することなく、HTMLマークアップを追加します。
• CSS内の「clearfix」の単一ソリューションへのクラス参照と、html内のそれへのクラス参照ではなく、各インスタンスのインライン定義とソリューションが必要です。
• 他の人がそれを回避するためにもっとハックを書かなければならないかもしれないので、それは他の人にとってコードを扱うのを難しくします。
• 今後、別のclearfixソリューションを使用する必要がある場合は、戻っ<br style="clear: both" />てマークアップの周りに散らばっているすべてのタグを削除する必要はありません。

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

フローティングする場合、2つの重要な考慮事項があります。

1. 子孫フロートを含む。つまり、問題の要素は、すべての浮動子孫をラップするのに十分な高さになります。（外にぶら下がっていません。）

   

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

   

ブロックの書式設定コンテキスト

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

そこコンテキストをフォーマットブロックを確立するには、いくつかの方法がありますが、私はお勧めのソリューションですdisplay: inline-blockとwidth: 100%。（もちろん、そこにある通常の注意事項使用してwidth: 100%、使用のでbox-sizing: border-boxまたはPUT 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 ソリューションの問題は、IEと他のすべてのユーザーに対して同じ目標を達成するために2つの異なるレンダリングコンセプトを使用することです。IEでは、hasLayoutを使用して新しいブロックフォーマットコンテキストを確立しますが、他のすべての人はで生成されたボックス（:after）を使用しclear: bothます。これにより、新しいブロックフォーマットコンテキストは確立されません。つまり、すべての状況で同じように動作するわけではありません。これが悪い理由の説明については、Clearfixについて知っているすべてが間違っているを参照してください。

Inuit.cssとBourbonによって使用される新しい標準-2つの非常に広く使用され、よく維持されているCSS / Sassフレームワーク：

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

ノート

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

これはIE7をサポートしていません。IE7をサポートするべきではありません。そうすることで、ユーザーを未修正のセキュリティ攻撃にさらし続け、他のすべてのWeb開発者の生活を困難にします。これにより、ユーザーや組織が最新のブラウザーに切り替えるというプレッシャーが軽減されます。

このclearfixは、2012年7月にThierry Koblentzによって発表され、説明されました。NicolasGallagher の2011年のmicro-clearfixから不要な重みを取り除きました。その過程で、それはあなた自身の使用のために疑似要素を解放します。これは（ここでも、Thierry Koblentzの功績による）display: blockではなく使用するように更新されていますdisplay: table。

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;  
}

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

.container { overflow: hidden; }

これはIE6を除くすべてのブラウザーで機能します。ここで必要なのは、hasLayoutを有効にすることだけです（ズームが私の優先メソッドです）。

.container { zoom: 1; }

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

公式のCLEARFIXメソッドにバグを発見しました：DOTにフォントサイズがありません。を設定height = 0し、DOMツリーの最初の要素にクラス「clearfix」が含まれている場合は、常に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とは何かに関する陸道の回答を読んでください。彼自身の言葉で：...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

フロート以外にも、他にも優れた（場合によっては優れた）オプションがあります。テクノロジーの進歩と改善に伴い、フレックスボックス（およびその他の方法）が広く採用されるようになり、フロートは単なる不良メモリになります。たぶんCSS4？

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

まず、ライフセーバーがパンクしてhtmlフローが沈み始めるまで、フロートから安全だと思うことがあります。

以下のcodepen http://codepen.io/omarjuvera/pen/jEXByaでは、フロート<div classs="clear"></div>（または他の要素）を使用してフロートをクリアする方法は一般的ですが、意味がありません。

<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％（またはそれ以上）は、小さな画面のモバイルデバイスです。デスクトップコンピューター/ラップトップはもはや王様ではありません。

終わらない

これはフロートに関する唯一の問題ではありません。たくさんありますが、この例では言う人もいますall you have to do is to place your floats in a container。しかし、コードペンやグラフィックでわかるように、そうではありません。それは明らかに最悪の事態を引き起こした：

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 */
}

これで<div classs="clear"></div> <!-- Acts as a wall -->、セマンティックポリスを必要とせず、幸せに保つことができます。これが唯一のメリットではありません。このclearfixは、@media最も単純な形式では使用せずに、任意の画面サイズに応答します。言い換えれば、フロートコンテナを抑制し、洪水を防止します。最後に、古いブラウザーをすべて1つの小さな空手チョップでサポートしています=）

これがクリアフィックスです

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

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

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

私は<br clear="all" />最も簡単で最も簡単であることがわかりました。見るclass="clearfix"どこでも、無関係なマークアップ要素に反対する誰かの感性を撫でることはできませんか？別のキャンバスに問題を描いているだけです。

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

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

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

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

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

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を書く方法です。

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

display: flow-root;

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

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

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

私#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! -->

css hackを使用して、HTMLの1行で処理を実行する理由 そして、セマンティックhtml tuを使用して、改行して改行しないのはなぜですか。

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

<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でも問題なく機能します。

他のclearfixとは異なり、ここにはコンテナのない制限のないものがあります

他のclearfixは、フロート要素が適切にマークされたコンテナにあるか、または追加の意味的に空のものが必要<div>です。逆に、コンテンツとマークアップを明確に分離するには、この問題に対する厳密なCSSソリューションが必要です。

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

後者が目的の場合、「クリアフィックス」が見つかるまで、フロートは何でも（パラグラフ、順序付けされたリストと順序付けされていないリストなど）ラップしておく必要があります。たとえば、clearfixは新しい見出しによって設定される場合があります。

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

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

このソリューションは私の問題を解決するために私のWebサイトで広く使用されています。浮かび上がったミニチュアの横のテキストは短く、次のクリアオブジェクトの上部マージンは尊重されていません。

また、サイトからPDFを自動的に生成するときに、手動による介入を防ぎます。ここにページの例があります。

私は常にmicro-clearfixを使用しています：

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

.cf:after {
    clear: both;
}

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

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

これをCSSに配置することもできます。

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

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

そして、親divにクラス「cb」を追加します。

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

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

これを試しましたか：

<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>

とても簡単なclearfixは、div要素内でfloatプロパティを使用することで問題を解決します。2つのdiv要素を使用する場合、1つはfloat：leftとして使用します。もう1つはfloat：rightです。2つのdiv要素の親にclearfixを使用できます。clearfixの使用を拒否すると、不要なスペースが以下の内容で埋められ、サイト構造が壊れます。