CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

1. ドキュメントフローとフローティング

1. ドキュメントフローとは何ですか?

HTML では、ドキュメントフローは標準フローまたは通常フローとも呼ばれます。要素は上から下、左から右に表示されます。ブロックレベル要素はデフォルトで 1 行を占めます。インラインまたはインラインブロックレベル要素は、コンテンツ部分またはそれ自体が占める部分のみを占めます。ブロックレベル要素ほど横柄に行を占めることはありません。実は、これは滝が上から下へ流れる自然現象と同じです^_^。

2. 落ち着かない浮遊

上記では、ドキュメントフローについてすでに予備的な理解をしましたが、Web ページ上の要素の表示は、ドキュメントフローに頼るだけでは不十分です。たとえば、Tmall Mall の商標ナビゲーションセクションでは、順序なしリスト ul の各リスト項目 li はブロックレベル要素 (display:list-item) です。ドキュメントフローによると、ブロックレベル要素は 1 行を占めるため、各 li は上から下に表示されますが、実際には各 li は独自の部分のみを占めます。次の図を参照してください。

では、なぜこれらの li 要素はドキュメントフローに従って表示されないのでしょうか。その理由は、これらがドキュメントフローから分離されているためです。ドキュメントフローから要素を作成するには、2 つの方法があります。1 つ目はフローティング (float)、2 つ目は配置 (position) です。
ドキュメントフローとは、他の家庭では親の言うことをよく聞き、とても行儀がよく、賢い子どものことですが、フローティングとは、私たちの家庭では言うことを聞かず、落ち着きのない子どものことです。私たちが幼い頃、両親からよく言われたように、「他の人の子供がどれだけ従順かを見て、それから自分自身をよく見てみなさい」

2. フローティングは諸刃の剣

フローティングにより要素がドキュメントフローから外れるため、シンプルなナビゲーションバーを作成するなど、要素の表示をより柔軟にすることができます。

 体{
        マージン:0;
        背景色:#333;
    }
    ul{
        リストスタイル:なし;
        幅:500ピクセル;
        マージン:100px 自動 0;
        パディング:0;
    }
    .clearfix:後{
        コンテンツ："";
        表示:ブロック;
        クリア:両方;
    }
    ul li{
        フロート:左;
        幅:100ピクセル;
        高さ:30px;
        背景色:#fff;
    }
    ウル・リア
        表示:ブロック;
        高さ:100%;
        行の高さ:30px;
        色:#000;
        テキスト装飾:なし;
        テキスト配置:中央;
    }

 <ul class="nav clearfix">
        <li>
            <a href="">ナビゲーション 1</a>
        </li>
        <li>
            <a href="">ナビゲーション 2</a>
        </li>
        <li>
            <a href="">ナビゲーション 3</a>
        </li>
        <li>
            <a href="">ナビゲーション 4</a>
        </li>
        <li>
            <a href="">ナビゲーション 5</a>
        </li>
    </ul>

もう一つの例は、先ほどの聖杯レイアウトです

   体{
        マージン:0;
    }
    。包む{
        パディング:0 300px;
    }
    .clearfix:後{
        コンテンツ："";
        表示:ブロック;
        クリア:両方;
    }
    .中央、.左、.右{
        フロート:左;
        位置:相対;
        高さ:100px;
    }
    。真ん中{
        幅:100%;
        背景色:#333;
    }
    。左{
        左:-300px;
        幅:300ピクセル;
        左マージン:-100%;
        背景色:#ccc;
    }
    。右{
        右:-300px;
        幅:300ピクセル;
        左マージン:-300px;
        背景色:#f00;
    }

  <div class="wrap clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

同時に、フローティングは他の効果ももたらします。たとえば、フローティング要素は、ドキュメントフローの背後にある要素を覆います。

  体{
        マージン:0;
    }
    .box-1{
        フロート:左;
        幅:200px;
        高さ:200px;
        背景色:#333;
    }
    .box-2{
        幅:200px;
        高さ:300px;
        背景色:#ccc;
    }

 <div class="box-1"></div>
    <div class="box-2"></div>

上記の問題を解決するには、BOX-2 の float をクリアするだけです。

  .box-2{
        クリア:両方;
        幅:200px;
        高さ:300px;
        背景色:#ccc;
    }

さらに、フローティング要素により、親要素の高さが縮小されます。高さのないブロックレベル要素の子要素がフローティングされている場合、ブロックレベルの親要素の高さは 0 になります。次のコードを参照してください。

   体{
        マージン:0;
    }
    .box-1{
        幅:300ピクセル;
        背景色:#333;
    }
    .box-2{
        フロート:左;
        幅:200px;
        高さ:300px;
        背景色:#ccc;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div>

要素に固定の高さが指定されていない場合、その高さはコンテンツによって拡張されることに注意してください。つまり、この要素にコンテンツがない場合、その高さは 0 です。この要素にコンテンツがある場合、高さ (つまり、コンテンツの高さ) が設定されます。次の図を参照してください。

 .box-1{
        幅:100ピクセル;
        背景色:#f00;
    }

<div class="box-1"></div>

<div class="box-1">私はコンテンツです</div>

上図では、親要素 BOX-1 に子要素 BOX-2 がありますが、その高さは 0 です。何が起こっているのでしょうか? BOX-2 が浮いているため、子要素 BOX-2 と親要素 BOX-1 の高さが同じではなく、BOX-1 は BOX-2 をラップできません。次の図を参照してください。

上の図は、フローティングによって親要素の高さが崩れる問題を示しています。

3. フローティングによる親要素の高さの崩れの問題を解決する方法

1. 子メソッド

子要素の最後に高さ 0 の子要素を追加し、フローティングをクリアします。コードをご覧ください。

   体{
        マージン:0;
    }
    .box-1{
        幅:300ピクセル;
        背景色:#f00;
    }
    .box-2{
        フロート:左; 
        幅:200px;
        高さ:150px;
        背景色:#ff0;
    }
    .box-3{
        クリア:両方;
    }

<div class="box-1">
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>

効果図は以下のようになります。赤いボックスが親要素、黄色いボックスが子要素BOX-2です。

2. 親メソッド

親要素に display:inline-block を設定します。
コードは次のとおりです。

  体{
        マージン:0;
    }
    .box-1{
        表示:インラインブロック;
        幅:300ピクセル;
        背景色:#f00;
    }
    .box-2{
        フロート:左; 
        幅:200px;
        高さ:150px;
        背景色:#ff0;
    }

 <div class="box-1">
        <div class="box-2"></div>
    </div>

親要素に overflow:hidden を設定します。
コードは次のとおりです。

   体{
        マージン:0;
    }
    .box-1{
        オーバーフロー:非表示;
        幅:300ピクセル;
        背景色:#f00;
    }
    .box-2{
        フロート:左; 
        幅:200px;
        高さ:150px;
        背景色:#ff0;
    }

  <div class="box-1">
        <div class="box-2"></div>
    </div>

上記の 2 つの方法は、実際には BFC (ブロックフォーマットコンテキスト) に基づいています。BFC では、親要素にフローティングの子要素を含めることができるため、親要素の高さが崩れる問題が解決されるため、BFC がトリガーされれば問題ありません。

親要素に固定の高さを与えることについては、あまり言うことはありません。実際の開発では、高さは一般的にコンテンツによってサポートされるため、詳細には触れません。

疑似要素: after を使用してフロートをクリアします。次のコードを参照してください。

  体{
        マージン:0;
    }
    .clearfix{
        幅:300ピクセル;
        背景色:#f00;
    }
    .clearfix:後{
        コンテンツ："";
        表示:ブロック;
        クリア:両方;
    }
    。箱{
        フロート:左; 
        幅:200px;
        高さ:150px;
        背景色:#ff0;
    }

 <div class="clearfix">
        <div class="box"></div>
    </div>

4. 最終

これで、フローティングによって発生する親要素の高さの崩壊の問題を解決するためのいくつかの CSS メソッドに関するこの記事は終了です。より関連性の高い CSS 親要素の高さの崩壊コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: Dockerオーバーレイはホスト間のコンテナ相互通信を実現します

>>: JavaScript の基本: ループと配列