CSS 仕様によれば、フロートはドキュメント フローの外に移動され、ブロック ボックスのレイアウトには影響せず、インライン ボックス (通常はテキスト) の配置にのみ影響します。したがって、その高さがコンテナを含むコンテナを超える場合、一般的な親コンテナはフローティング要素を閉じるために自動的に伸縮しません。しかし、場合によってはこの自動終了動作が必要になることがあります。
これを行う 1 つの方法は、親コンテナに追加のラベルを挿入し、親コンテナを展開することを明確にすることです。この方法はブラウザーとの互換性が高く、問題はありません。欠点は、追加の (そして通常は意味論的に非セマンティックな) タグが必要になるため、個人的には好きではありません。
その後、:after 疑似クラスを使用して、float をクリアする要素を動的に埋め込む新しい方法が登場しました。この方法は、追加のコンテンツが CSS で生成されることを除いて、以前の方法と同じ原理ですが、IE では生成されなかったことを考慮してください。サポート：その後、多くのハッキングを行う必要がありました。この方法には一般的な互換性がありますが、さまざまなハックを通じてさまざまなブラウザーを処理できると同時に、HTML を比較的きれいに保つことができるため、今でもよく使用されています。
その後、親コンテナのオーバーフローを表示以外の値に設定すると、標準準拠のブラウザではフローティング要素を閉じることができることが発見されました。そのため、この方法は前の方法と同様に有効です。異なる処理 (特にレイアウトのトリガー) を実行します。違いは、オーバーフローが :after 疑似クラスほど厄介ではないことです。また、オーバーフローにはいくつかの小さな競合が発生する可能性があります。
オーバーフローを使用する前は、フローティング要素を閉じるというフローティング要素の特性を利用して、親コンテナをフロートにする別の方法がありました。この方法は IE/Win および標準互換ブラウザでは良好な結果をもたらしますが、欠点も明らかです。結局のところ、フローティングは特殊な動作であり、レイアウトがフローティングにならない場合があります。浮かせるのも正常です。 IE および標準準拠のブラウザでは float 要素を閉じることができますが、IE/Win では原理が異なります。そのため、標準準拠のブラウザでは、float は実際には以前のものと同じになります。このメソッドのオーバーフローの原理は同じであり、結果として「ブロックレベルの書式設定範囲」が発生します。これは CSS 仕様で言及されている現象です。多くの場合、このメソッドの特徴の 1 つは、内部フロートを自動的に閉じることです。 。 要素。
仕様により、次のタイプの要素はブロックレベルの書式設定スコープになります。
● フローティング要素は左または右のいずれかにできます。
● 要素は絶対に配置されます。
● Inline-block 要素ですが、この Gecko は現在それをサポートしていません。
● table-cell タイプの要素。実際には、inline-table (gecko ではサポートされていません) だけでなく、table、table-head-group、table-row なども使用できます。これらはすべて間接的に匿名テーブルを生成するためです。細胞。
● オーバーフローは値が見えない要素です。
したがって、標準準拠のブラウザでは、フローティング要素を閉じるためのメソッドが非常に多くあり、CSS のみが必要で、他には何も必要ないことがわかります。ちなみに、上記はオーバーフローの他に、親コンテナの幅を自動的に縮小するという追加効果もあります。
IE/Win には、レイアウトという独自のシステムがあり、レイアウトを含む要素は自動的にフローティング要素を閉じます。レイアウトをトリガーする CSS プロパティを見てみましょう。ブロックレベルの書式設定と多くの類似点があることがわかります。上記の範囲：
● 浮動要素 ● 絶対配置要素 ● display:inline-block
●ズーム
●幅/高さ
● overflow/overflow-x/overflow-y [IE7 の新機能]
● 最大/最小幅/高さ [IE7 の新機能]
上記のことから、IE にはフローティング要素を閉じる方法が数多くありますが、当然のことながら、それらには副作用があるか、非標準の属性 (検証に合格できない) が使用されます。
もう 1 つ言及すべき点は、display:inline-block です。この属性自体は IE には役に立ちません。実際の効果は、要素にこっそりとレイアウトを追加することだけです。そのため、標準に準拠したブラウザはこの属性に影響を与えません。ブラウザの場合は、表示をデフォルトに戻す必要があります。ここで IE にはバグがあります。最初に display:inline-block を定義してから、表示を block に戻すと (効果を得るには、これら 2 つの表示を 2 つの CSS ステートメントに順番に配置する必要があります)、レイアウトは次のようになります。消えず、同時にレイアウトも消えません。したがって、今のところ、これはレイアウトをトリガーする良い方法でもあります。
| .gainlayout{ディスプレイ:インラインブロック;} .gainlayout{ディスプレイ:ブロック;} |
したがって、ブラウザ間でフローティング要素を閉じる方法は数多くあります。これらの CSS プロパティを組み合わせて使用するには、特定の状況を詳細に分析する必要があります。実際に機能しない場合は、柔軟に条件付きコメントを適用することも必要です。裏返してクリアに使用できます。