CSSのfloatをクリアするいくつかの方法と互換性処理方法をまとめます

この記事では、CSS でフローティングフロートをクリアするための 7 つの一般的な方法の詳細な概要と互換性処理を主に紹介します。これは非常に実用的であり、必要な場合は参考にしてください。

フロートをクリアする前に、次の 2 つの重要な定義を理解する必要があります。

フローティングの定義: 要素をドキュメント フローから切り離すには、指定された方向に移動し、親の境界または隣接するフローティング要素に遭遇したときに停止します。

高さの折りたたみ: フローティング要素の親要素の高さは適応的です(親要素が高さを書かず、子要素がフロートを書く場合、親要素の高さは折りたたみます)

Afterフロートをクリアする必要がある理由を理解したら、フロートをクリアする方法を学び始めることができます。
clear:left none |要素の特定の方向の要素
clear:both: 左側と右側では、浮動要素は許可されません。

フローティングの主なメソッドは次のとおりです:

1. Clear Clear float (空の p メソッドを追加)

フローティング要素の下に空の p を追加し、要素の CSS スタイルを記述します。

 {clear:both;height:0;overflow:hidden;}

2. 方法: 浮動要素の親に高さを設定します

高さの崩壊は浮動要素の親の適応高さによって引き起こされることがわかっているので、それに適切な高さを設定します。それでこの問題は解決します。

デメリット: 浮動要素の高さが不確実な場合は適用できません

3. 方法: float by float (親も同時に浮動します)

「float by float」とは何ですか?それは、浮動要素の親も浮動にすることです。

短所: 各浮動要素の親に浮動小数点を追加する必要があります。浮動小数点数が多すぎると、問題が発生しやすくなります。

4. 方法: 親を inline-block に設定します

欠点: 親の左右のマージンは無効で使用できません。 margin: 0 auto; br clear float

<p class="box">
    <p class="top"></p>
    <br clear="both" />
</p>

br タグには独自の clear 属性があり、これを両方に設定することは、空の p を追加することと同じです。

問題: 職場での構造、スタイル、行動の分離の要件を満たしていません。

6. overflow:hidden clear float メソッドを親に追加します。

問題: IE6 IE7 と互換性を持たせるには、

rreee

7 の後に幅を一致させる必要があります。 class clear float (現在主流のメソッド、推奨)

overflow: hidden;
*zoom: 1;

同時に、IE6 および 7 と互換性を持たせるために、zoom で使用する必要もあります。例:

选择符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }

。注意事項:

after 疑似クラス: 要素の最後にコンテンツを追加します。

:after{content"added content";} IE6 および 7 は

zoom ズーム

と互換性がありません。 IE では、要素が独自のコンテンツに基づいて幅と高さを計算します。 b. FF はサポートされていません。

以上がCSSのfloatをクリアするいくつかの方法と互換性処理方法をまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。