Div+CSS チュートリアル: フローティング要素を閉じるには? _html/css_WEB-ITnose

CSS 仕様によれば、フローティング要素 (float) はドキュメント フローの外に移動され、ブロック ボックスのレイアウトには影響せず、インライン ボックス (通常はテキスト) の配置にのみ影響します。したがって、その高さがコンテナを含むコンテナを超える場合、一般的な親コンテナはフローティング要素を閉じるために自動的に伸縮しません。しかし、場合によってはこの自動終了動作が必要になることがあります。

これを行う 1 つの方法は、親コンテナに追加のラベルを挿入し、親コンテナを展開することを明確にすることです。この方法はブラウザーとの互換性が高く、問題はありません。欠点は、追加の (そして通常は意味論的に非セマンティックな) タグが必要になるため、個人的には好きではありません。

その後、:after 疑似クラスを使用して、浮動要素を削除する要素を動的に埋め込む新しい方法がありました。この方法は、追加のコンテンツが CSS を使用して生成されることを除いて、以前の方法と同じです。それは IE がサポートしていないことを意味します。その後、私は多くのハックをしなければなりませんでした。この方法には一般的な互換性がありますが、さまざまなハックを行った後、さまざまなブラウザーに対応できると同時に、HTML を比較的きれいに保つことができるため、今でもよく使用されています。

その後、親コンテナのオーバーフローをvisible以外の値に設定すると、標準準拠のブラウザではフローティング要素を閉じることができることが発見されました。当然、IEではサポートされていないため、この方法は前の方法と同じです。それらはすべて IE の処理方法が異なります (特に、レイアウトのトリガー)。オーバーフローは :after 疑似クラスほど厄介ではないということです。また、オーバーフローにはいくつかの小さな競合が発生する可能性があります。

オーバーフローを使用する前に float を使用する別の方法があります。これは、浮動要素の特性を利用して、浮動要素を閉じることです。この方法は IE/Win および標準互換ブラウザでは良好な結果をもたらしますが、欠点も明らかです。結局のところ、フローティングは特殊な動作であり、レイアウトがフローティングにならない場合があります。浮かせるのも正常です。 IE および標準準拠のブラウザでは float 要素を閉じることができますが、IE/Win では原理が異なります。そのため、標準準拠のブラウザでは、float は実際には以前のものと同じになります。このメソッドのオーバーフローの原理は同じで、結果として「ブロックレベルの書式範囲」が発生します。これは CSS 仕様で言及されている現象です。特徴の 1 つは、内部で自動的に閉じられることです。フロート要素。

仕様によれば、次のタイプの要素はブロックレベルの書式範囲を生成します:

● 左または右のフローティング要素。
● 絶対配置の要素。
● Inline-block 要素ですが、この Gecko は現在サポートしていません。
● テーブルセル型の要素、実際には、テーブル、テーブルヘッドグループ、テーブル行なども受け入れられます。また、インラインテーブル（gecko ではサポートされていません）も同様です。これらはすべて間接的に匿名テーブルを生成するためです。 -セル。
●オーバーフローは値が見えない要素です。
つまり、標準準拠のブラウザーでもフローティング要素を閉じるためのメソッドが非常にたくさんあり、CSS のみが必要で、他には何も必要ないことがわかりました。ちなみに、上記はオーバーフローに加えて、親コンテナの幅を自動的に縮小するという追加効果もあります。

IE/Win には、レイアウトという独自のシステムがあり、レイアウトをトリガーする CSS プロパティを見てみましょう。ブロックと多くの類似点があることがわかります。機能:
● 浮動要素
● 絶対配置要素
● display:inline-block
● ズーム
● 幅/高さ
● overflow/overflow-x/overflow-y [IE7 new]
● max /min- width/height [IE7 の新機能]
上記から、IE ではフローティング要素を閉じる方法がたくさんありますが、当然のことながら、副作用が発生したり、非標準の属性を使用したり (検証に合格できない)、それぞれに制限があります。 ）。

もう 1 つ言及しておきたいのは、display:inline-block です。この属性自体は IE には役に立ちません。ただし、標準に準拠したブラウザはこの属性を認識するだけです。これらのブラウザに影響を与える場合は、表示をデフォルトに戻す必要があります。ここで IE にはバグがあります。最初に display:inline-block を定義してから、表示を block に戻すと (効果を得るには、これら 2 つの表示を 2 つの CSS ステートメントに順番に配置する必要があります)、レイアウトは次のようになります。消えることはなく、同時にレイアウトも消えることはありません。他のブラウザーには影響しないため、現時点では、これもレイアウトをトリガーする良い方法です:

.gainlayout{display:inline-block;}
。 Gainlayout{display:block;}
したがって、フローティング要素を閉じるにはさまざまな方法があり、条件付きコメントを柔軟に適用することも必要です。うまくいかない場合は、戻ってクリアを使用できます。