CSS クリアフロート互換性メソッド

今回は、cssclear floatfloatの互換性方法、注意事項は何ですかcss Clear float互換性方法について、実際のケースを紹介しますので、見てみましょう。

フロートをクリアする前に、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 に設定します

欠点: 親の左右のマージンは無効であり、使用できません。マージン: 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 と互換性を持たせるためには、

overflow: hidden;
*zoom: 1;

7 の後にユニバーサルな Clear メソッドを追加する必要があります。 (現在主流の方法、推奨使用法)

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

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

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}

注意事項:

以降。 pseudo-class: 要素の最後にコンテンツを追加します。

:after{content "added content" ;} IE6 および 7 と互換性がありません

zoom

a. 要素が幅と高さを計算するように、haslayout をトリガーします。独自のコンテンツに基づいています。 b. FF はサポートされていません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

focus-within の使用の詳細な説明

擬似要素::before および ::after の使用の詳細な説明

以上がCSS クリアフロート互換性メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。