高さ崩れとは何かとその基本的な解決方法

1. ハイコラプスとは

        フローティング レイアウトでは、デフォルトで親要素の高さが子要素によって拡張されます。

        子要素がフローティングになると、子要素はドキュメント フローから完全に外れ、子要素もドキュメント フローから外れ、親要素の高さをサポートできなくなり、その結果、親要素の高さ

        親要素の高さが失われると、その下にある要素が自動的に上に移動し、ページのレイアウトが混乱するため、高さの崩れはフローティング レイアウトでよく見られる問題であり、これを解決する必要があります。

2、解決策

        高さの崩壊を理解した後、それに関連することを理解する必要があります、BFC

BFC (Block Formation Context) ブロックレベルの書式設定環境

BFC は、要素の BFC を開始できる CSS の隠しプロパティです。

BFC をオンにすると、要素は独立したレイアウト領域になります。

2.1 BFC を有効にする

        BFC が有効になった後の要素の機能:

                1. BFC がオンになっている要素は、フローティング要素によってカバーされません。

                2. 子要素の外側の余白と、BFC が有効になっている要素の親要素は重なりません。

                3. BFC が有効になっている要素にはフローティング子要素を含めることができます

        要素の BFC は、いくつかの特別な方法で有効にすることができます。

                1. 要素のフロートを設定します (非推奨)

                2. インラインブロック要素として設定します（非推奨）

                3. 要素のオーバーフローを非表示の値に設定します

                        一般的な方法は、要素 overflow: hidden を設定して BFC を有効にすることです。

2.2 高さ崩壊を解決するために擬似要素の後に使用する (完全な解決)

<style>
    .box{
        border:18px red solid;
    }
    .box2{
        width:100px;
        height:100px;
        float:left;
    }
    .box::after{
        display:block;
        clear:both;
    }
</style>

2.3 クリアフィックスを設定する

        clearfix スタイルは、高さの崩れとマージンの重なりの問題を同時に解決できます。これらの問題が発生した場合は、clearfix クラスを直接使用できます。

.clearfix::before,.clearfix::after{
     content:'';
     display:table;
     clear:both;
}