CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか？

親ボックスの内側にあるべき要素が外側にあります。

第二に、箱はなぜ崩壊するのでしょうか?

親要素が十分なサイズに設定されておらず、子要素がフロートに設定されている場合、子要素は親要素の境界（ドキュメント フローの外）から飛び出します。特に、親要素の高さが自動で、親要素内にフロートしていない他の表示要素がない場合、親ボックスの高さは直接 0 に縮小されます。これを CSS の高さ縮小と呼びます。

次の図では、下部の 2 つの子要素のボックスがそれぞれ左と右にフロートするように設定されており、上部の長いボックスは折りたたまれています。

元：

3. ボックスの崩壊に対するいくつかの解決策

最も単純で直接的かつ大まかな方法​​は、ボックスのサイズをハードコードし、各ボックスの幅と高さを適切な値になるまで固定することです。この方法の利点は、シンプルで便利、互換性が良い、コンテンツの変更が少なくボックスのレイアウトを伴わないレイアウトに適していることです。欠点は、適応性がなく、ブラウザのウィンドウサイズがユーザーエクスペリエンスに直接影響することです。

外側の親ボックスにフロートを追加して、標準のドキュメント フローから分離します。この方法は便利ですが、ページ レイアウトにはあまり適しておらず、保守が困難です。

親ボックスにオーバーフロー プロパティを追加します。

1. overflow:auto; を使用するとスクロールバーが表示され、外観に影響する可能性があります。
2. overflow:hidden; によりコンテンツが見えなくなる可能性があります。

親ボックスの下部にクリアフロートを導入します。最も単純なものは次のとおりです。

<br style="clear:both;"/>

多くの人がこの問題を解決していますが、不要な冗長要素が導入されるため、お勧めしません。

after 疑似クラスはフロートをクリアします。

外側のボックスの after 疑似要素は clear プロパティを設定します。

#親:後{
                クリア: 両方;
                コンテンツ： "";
                幅: 0;
                高さ: 0;
                表示: ブロック;
                可視性: 非表示;
            }

これは、フローティングによって発生するボックスの崩壊を解決するための純粋な CSS メソッドです。冗長な要素は導入されません。このメソッドは、CSS ボックスの崩壊を解決するために推奨されます。

注意: 5 番目の方法は良いですが、IE の下位バージョンとは互換性がありません。選択する具体的な解決策は、実際の状況に基づいて決定できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。