CSSの高さの折りたたみとは何ですか

ドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つまり、子要素の高さは親要素の高さと同じになります。ただし、子要素を float に設定すると、子要素はドキュメント フローから完全に切り離され、このとき、子要素は親要素の高さをサポートできなくなり、親要素の高さが大きくなり、崩壊する。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

親要素にフローティング要素のみが含まれており、親要素に高さと幅が設定されていない場合、その高さはゼロに折りたたまれます。これは、いわゆる「高さの折りたたみ」です。

親要素に背景または境界線が含まれている場合、はみ出した要素は親要素の一部のようには見えません。

「高さの崩れ」問題を解決する方法:

オプション 1: 親要素に固定の高さを与える

欠点: 親要素の高さを固定することは、高さの適応の原則に違反し、十分な柔軟性がないため、お勧めできません。

オプション 2: 親要素に属性オーバーフロー: 非表示を追加します;

利点: ブラウザーの優れたサポート、シンプル;

欠点: として子要素 位置決め属性がある場合、overflow:hiddenを設定するとコンテナの外側の部分が切り取られます。

[推奨チュートリアル: CSS ビデオ チュートリアル]

オプション 3: 子要素の最後に空の p を追加し、以下のスタイルを設定します

div{
clear: both;
height: 0;
overflow: hidden;
}

利点: すべてのブラウザーがサポートしており、コンテナーのオーバーフローがクリップされません;
欠点: 意味のない div をページに追加すると、コードの冗長性が簡単に発生する可能性があります。

オプション 4: Universal Clear Float メソッド

3 番目のオプションの機能を実現するために、親要素のコンテンツの最後に疑似要素を追加します。

親要素:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

利点: コードの冗長性が生じず、残りのコードのパフォーマンスが最適化されるため、使用することをお勧めします。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がCSSの高さの折りたたみとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。