CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:

サブボックスをフロートに設定した後の効果:

青いボックスをフロートに設定すると、標準のドキュメントフローから外れているために親ボックスの高さをサポートできず、高度塌陷ことがわかります。この問題が Web ページで発生すると、Web ページ全体のレイアウトが乱れてしまいます。

2. 解決策:

親ボックスは固定の高さを設定します ------------------親要素に固定の高さを追加します
内壁方式---------------------------------親要素の後に空のdivを追加し、スタイルをclear:bothに追加します。
疑似要素のクリア方法 ----------------- 親要素のクラス名にclearfixというクラスを追加する（推奨）
overflow:hidden---------------------親要素のスタイルにoverflow:hiddenを追加します

（１）親ボックスの高さを固定する

親ボックスの高さを固定すると、一時的に問題は解決しますが、柔軟性がありません。将来、子ボックスの高さ要件が (Web ページの多くの場所で) 変更された場合、親ボックスの高さを手動で変更する必要があります。後からメンテナンスするのは簡単ではありません。

用途: 固定ナビゲーションバーなど、Web ページ内のボックスの固定高さ領域。

デメリット: 柔軟性に欠け、後でメンテナンスが困難

（２）内壁工法

フローティング要素の後に空のブロックレベル要素 (通常は div) を追加し、その要素にclear:both；属性を設定します。 clear 属性は文字通り「クリア」を意味するため、どちらも左側と右側のフローティング要素の影響をクリアすることを意味します。

コードは次のとおりです。

<!DOCTYPE html>
    <html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>フローティング要素は破壊的である</title>
        <スタイル タイプ="text/css">
            。父親{
                境界線: 1px 実線の赤;
            }
            。子供{
                幅: 200ピクセル;
                高さ: 200px;
                フロート: 左;
                背景色: 緑;
            }
            .clearfix{
                クリア: 両方;
            }
        </スタイル>
    </head>
    <本文>
        <div class="父">
            <div class="child">息子</div>
            <div class="clearfix"></div>
        </div>
    </本文>
    </html>

アプリケーション: Web ページには多くのアプリケーションはなく、フローティングをクリアするための次の方法をガイドするだけです。

デメリット: 構造上の冗長性

（３）擬似要素除去法

内壁方式では、フローティング要素の後に空のブロックレベル要素 (通常は div) を追加し、その要素にclear:both；属性を設定します。

実は、CSS3 属性の使用法には、この使用法に完全に適合するセレクター、疑似要素セレクターが存在します。これは擬似クラスに似ており、擬似要素にはセレクターが追加されていますが、特別な状態を記述する代わりに、要素の特定の部分のスタイル設定を許可します。

これは、p タグ要素の末尾にスタイルを追加することを意味し、これは内壁方式の使用法にも準拠します。

コードは次のとおりです。

<!DOCTYPE html>
    <html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>フローティング要素は破壊的である</title>
        <スタイル タイプ="text/css">
            。父親{
                境界線: 1px 実線の赤;
            }
            。子供{
                幅: 200ピクセル;
                高さ: 200px;
                フロート: 左;
                背景色: 緑;
            }
            .cleafix:後{
                コンテンツ：'。';
                表示: ブロック;
                クリア: 両方;
                オーバーフロー: 非表示;
                高さ: 0;
            }
        </スタイル>
    </head>
    <本文>
        <div class="父クリアフィックス">
            <div class="child">息子</div>
        </div>
    </本文>
    </html>

将来的にフロートをクリアする必要がある場合は、タグに「clearfix」クラスを追加するだけです。非常に便利で迅速です。

疑似要素の削除方法の説明:

.clearfix:後{
        content:''; は、.clearfix 要素にコンテンツを追加することを意味し、コンテンツはインライン要素です。
        display: block; は、要素をブロックレベル要素に設定し、内壁法の要件に準拠します。 (テーブルもブロックレベル要素であるため、いくつかの場所ではテーブルが使用されています)
        clear: both; フロートをクリアするメソッド。 overflow: hidden; と記述する必要があります。display:none; を使用する場合、要素はブロックレベル要素にはなりません。 overflow:hidden; は非表示の要素を意味しますが、要素はスペースを占有します。一方、display:none; はスペースを占有しません。
        高さ: 0;
    }

:after (疑似クラス) と ::after (疑似要素) の違いは次のとおりです。

類似点

どちらも疑似クラスオブジェクトを表し、オブジェクトの前にコンテンツを設定するために使用できます。
:before と ::before は同等です。:after と ::after も同等ですが、バージョンが異なるだけです。

違い

:before/:afterはCSS2の記述方法、::before/::afterはCSS3の記述方法です。
:before/:after は ::before/::after よりも互換性があります。
ただし、H5 開発では ::before/::after を使用することをお勧めします。

知らせ

これらの疑似要素はコンテンツ属性とともに使用する必要があります
これらの疑似要素は DOM には表示されないため、js で操作することはできません。CSS レンダリングレイヤーにのみ追加されます。
これらの疑似要素効果は通常、:hover 疑似クラススタイルを使用してアクティブ化されます。

（4）オーバーフロー：非表示

overflow CSS プロパティは、要素のコンテンツが大きすぎてボックスに収まらない場合にどうするかを定義します。これは、overflow-x および overflow-y の短縮プロパティです。

overflow プロパティは上記の効果を実現できるだけでなく、要素に overflow:hidden|auto|scroll プロパティが設定されている場合は、塊級格式化上下文と呼ばれる BFC 領域が形成されます。

BFC は単なるルールです。フローティングポジショニングに重要です。フロートの配置とクリアは、同じ BFC 内の要素にのみ適用されます。

フローティングは他の BFC 内の要素のレイアウトには影響しませんが、フロートをクリアすると、同じ BFC 内のその前にある要素のフロートのみがクリアされます。

利点: 簡潔なコード

デメリット：コンテンツが増えると、自動行折り返しの失敗によりコンテンツが隠れてしまうことが発生しやすく、溢れた要素を表示できません。

要約: 親ボックスが BFC の領域を形成するようにすれば、その領域内のフローティング要素の影響は自動的にクリアされます。

BFC エリアを形成するもの:

これで、CSS レイアウトのフローティングの問題に対する 4 つの解決策に関するこの記事は終了です。CSS レイアウトのフローティングに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS の位置属性 (absolute|relative|static|fixed) の概要と応用

>>: Javascript イベントキャプチャとバブリングメソッドの詳細な説明