フローティング要素を閉じる問題は多くの人が研究していますが、解決策は異なり、すべての方法が完璧であるわけではありません。フローティング要素を閉じる（またはフロートをクリアする）ことは、Web 標準デザインでよく遭遇する問題です。そこで、ここではよく使用されるいくつかの方法をまとめ、その使いやすさと適用可能な環境を比較したいと思います。もっと良い方法がある場合は、議論に持ち込んでください。
最も単純なケースは、小さな固定幅の div 要素 (ナビゲーション、参照など) を他の要素のコンテンツとともに大きな div に含めることです。たとえば、次のコード:
<div id="outer">
<div id="inner"> <h2>列</h2> </div>
<h1>メインコンテンツ</h1>
<p>ロレム・イプサム</p>
</div>
「#inner」には幅の値（例えば20%）を設定できますが、divはブロックレベルの要素であるため、幅を設定してもその後ろの内容は次の行にしか表示されません。与えます float プロパティを設定します (左にフロートまたは右にフロートのいずれか)。そうすると、このときに上で述べたような問題が発生することになります。
「#inner」の幅と高さが「#outer」よりも小さい場合、これは問題になりません。
ただし、「#inner」の高さが「#outer」の高さを超えると、 の底部が「#outer」の底部を超えます。これは、「#inner」にfloat属性を設定した後、テキストの流れから外れてしまい、幅や高さがどんなに変化しても「#outer」がその変化に追従しないためです。
解決策:
1) 追加タグの方法
1 つ目の方法 (W3C によって推奨されている方法) は、追加タグを使用することです。この方法は、コンテンツの最後に空のタグを追加することです。一般的なアプローチは次のようなものを使用することです。
<br style="クリア:両方;" />
または使用します
<div style="clear:both;"></div>
このメソッドは、HTML 要素を追加することで外側のコンテナを強制的に展開します。ただし、この方法では追加のタグが追加されるため、HTML 構造の簡潔さが失われます。
注: Internet Explorer (6 または 7) では<br style="clear:both" /> はフローティング要素をクリアできますが、Firefox ではこの問題が存在しないことがわかりました。 ? ！
2) after 疑似クラスを使用して、
after 疑似クラスとコンテンツ宣言を使用して、指定された現在のコンテンツの末尾に新しいコンテンツを追加します。一般的なアプローチは、小さくて目立ちにくいため、「ドット」を追加することです。次に、それを使用してフロートをクリアし (フロート要素を閉じ)、コンテンツを非表示にします。
#アウター:後{
コンテンツ："。";
高さ:0;
可視性:非表示;
表示:ブロック;
クリア:両方;
不思議なのは、Windows の Internet Explorer 6 以下では CSS 2.1 の after 疑似クラスがサポートされていないのですが、Mac の Internet Explorer は普通に使えるので、Win/IE を分けて対応する必要があります。 Win と Mac の Internet Explorer を区別する多くの方法の中で、最も一般的に使用される方法は、Holly トリックである CSS コードです。
/* このコードは IE/Win でのみ表示できます*/
CSS ルール
/*End Hack */
上記のコードにはコメントが 2 行ありますが、最初の行の最後にバックスラッシュ () が表示されると、Mac 上の Internet Explorer はコメントがまだ終了していないと判断して、コメントが終了するまで続きます。最初の行には完全な「*/」が表示され、中間の文字はすべてコメントとみなされますが、IE/Win は 1 行目と 3 行目のみをコメントとみなし、中間の文字は有効なコードと見なされます。したがって、これにより、さまざまなプラットフォーム上の IE が区別されます。
上記の原則に基づいて、Windows の IE 6 でフロートをクリーンアップするには、次のコードを使用できます。
#アウター {
表示:インラインブロック;
}
/* ホリーハックの開始 */
* html #outer {
高さ: 1%;
}
#アウター {
表示:ブロック;
}
/* ハック終了 */
PS IE6/Mac ユーザーを考慮しない場合は、* html #outer {height:1%;} と書くだけで済みます。
また、Internet Explorer 7 では、display:inline-block がうまく動作しないようです。したがって、最も完全なハック トリックを使用してください。
3) 外部要素をフロートします。 float-in-float
メソッドは非常に簡単で、「#outer」要素を (左または右に) フローティングします。
ただし、この方法では「#outer」に隣接する次の要素が「#outer」の影響を受けて位置が変わってしまうという問題もあるので、使用する際には注意が必要です。ページ上のすべての要素をフローティングにし、最後に適切な意味のある要素 (フッターなど) を使用してフロートをクリーンアップするオプションがありますが、フロートが多すぎるとレイアウトが難しくなります。
4) オーバーフローを hidden または auto に設定します。
「#outer」属性のオーバーフロー値を hidden または auto に設定すると、
この方法では追加のタグを追加する必要はありません。ただし、ブラウザのパフォーマンスに影響を与えるため、オーバーフローを使用する場合は注意してください。さらに、Internet Explorer 6 でオーバーフローを非表示または自動に設定するだけでは、フロートを効果的にクリアする (フローティング要素を閉じる) ことはできません。また、「#outer」の寸法、つまり幅または高さを指定する必要があります。 :
#アウター {
オーバーフロー:自動;
幅:100%;
}
注: IE5/Mac でこのメソッドを使用してフロートをクリアする (フローティング要素を閉じる) 場合は、オーバーフロー属性を非表示に設定する必要があります。
4 つの方法のうちどれが最適か
を比較して選択してください
。まず、after 疑似クラスの使用はお勧めできません。他の 3 つの方法と比較すると、ホーリー トリックは少し面倒で習得が困難です。上で述べたホーリー トリックは IE/ 上だけの問題ではありません。 Win:hover が表示されると、他の問題も発生するため、inline-block などの属性を追加しました。これは、この方法にはより不確実性があることを意味します。コードに対して「クリーン」で、高い技術スキルを持っている人におすすめです。
そうすると、実際には他の 3 つの方法が考えられます。ただし、オーバーフローを使用する場合は、ページのパフォーマンスに影響を与える可能性があり、この影響は不確実です。複数のブラウザでページをテストし
、追加のタグを使用してフロートをクリアする (フロート要素を閉じる) ことを推奨します。 W3Cによる。 <br /> 要素を使用するか、空の <div></div> を使用するかについては、好みに応じて選択できます (もちろん、他のブロックレベルの要素を使用することもできます)。ただし、<br /> 自体にパフォーマンスがあることに注意してください。余分な改行が含まれるため、パフォーマンスを隠すために高さを 0 に設定する必要があります。したがって、ほとんどの場合、空の <div> を使用する方が適切です。
Float-in-float も良い選択です。クリーンアップしたい要素の外側のレイヤーに <div> のレイヤーを追加し、load:left 属性を設定します。ただし、隣接する要素の変更に注意してください。