CSSの高さの崩壊問題についての簡単な説明

パフォーマンス

例えば：

HTML:

<div class="first">
    <div class="first-child1">最初の子1</div>
    <div class="first-child2">最初の子2</div>
</div>
<div class="second">
    2番
</div>
<div class="third">
    三番目
</div>

CS: ...

。初め{
    幅: 300ピクセル;
    背景色: ピンク;
}
.first .first-child1,.first .first-child2{
    フロート: 左;
    幅: 100ピクセル;
    高さ: 100px;
}
.first .first-child1{
    背景色: 紫;
    右マージン: 10px;
}
.first .first-child2{
    背景色: 赤;  
}
。2番{
    幅: 200ピクセル;
    高さ: 150px;
    背景色: 青;
}
。三番目{
    幅: 100ピクセル;
    高さ: 150px;
    背景色: 緑;
}

それは次のように現れます:

原因

上記の例からわかるように、最初のボックスには高さが設定されておらず、子要素によって引き伸ばされています。ただし、子ボックスはフロートに設定されており、標準フローから外れているため、最初のボックスには高さがなく、2 番目と 3 番目のボックスが上に移動します。

高い崩壊率の理由は次のように結論付けられます。

ドキュメントフローでは、親要素の高さはデフォルトで子要素によって拡張されます。つまり、親要素の高さは子要素の高さと同じになります。ただし、子要素をフロートに設定すると、ドキュメントフローから完全に外れてしまいます。このとき、子要素は親要素の高さをサポートできず、親要素の高さが崩れてしまいます。親要素の高さが縮むため、親要素の下にあるすべての要素が上に移動し、ページレイアウトが乱雑になります。

高い崩壊に対する解決策:

1. 親要素に固定の高さを設定します。ただし、この方法を使用した後、子要素に合わせて親要素の高さを自動的に増やすことはできません。高さを固定できる場合は、自分のページの特性に合わせてこの方法を使用できます。そうでない場合は、この方法はお勧めしません。

2. 追加タグ方式: これは W3C が推奨する解決策ですが、HTML の原則は意味のあるタグを記述することであるため、推奨されません。この方法では、意味のないタグが追加されます。

<div class="first">
    <div class="first-child1">最初の子1</div>
    <div class="first-child2">最初の子2</div>
    <div style="clear: both;"></div>
</div>

3. 親要素のオーバーフロープロパティ（要素の BFC を開く）:

.clearfix{
    オーバーフロー: 非表示;
}

この方法を使用すると、属性値は任意の非表示 (hidden/auto/scroll) にすることができますが、hidden が推奨されます。

このメソッドは副作用が少なくなります。このメソッドは IE6 ではサポートされていません。zoom: 1; を追加できます。

.clearfix::after{
    content: "";/*疑似要素のコンテンツは空です*/
    display: block;/*デフォルト以外でも問題ありません。テーブルなどでも構いません。*/
    height: 0;/*疑似要素の高さは0で、他の要素には影響しません*/
    clear: both;/*フロートをクリア*/
    visibility: hidden;/*非表示*/
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

4. 単一の疑似要素の後のフロートをクリアします（要素の BFC をオンにします）。

.clearfix::after{
    content: "";/*疑似要素のコンテンツは空です*/
    display: block;/*デフォルト以外でも問題ありません。テーブルなどでも構いません。*/
    height: 0;/*疑似要素の高さは0で、他の要素には影響しません*/
    clear: both;/*フロートをクリア*/
    visibility: hidden;/*非表示*/
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

この方法は現在広く使用されています。多くの大規模な Web サイトがこの方法を使用しています。副作用が少なく、IE6 で処理するだけで済みます。

5. 二重疑似要素のクリアフローティング（要素の BFC を開く）:

.clearfix::before、.clearfix::after{
    コンテンツ： "";
    表示: ブロック;
    クリア: 両方;
}
.clearfix{
    zoom: 1;/*IE6 要素には BFC モードはありませんが、このコードは IE6 で hasLayout モードをオンにします。これは IE でのみサポートされています*/
}

このアプローチは記述が面倒なので、お勧めできません。

親要素のフローティングの影響をクリアした後の効果: