CSS にフロート要素が含まれている場合、「overflow: hidden」によって高さが拡張されるのはなぜですか?

Overflow: Hidden の高さ拡張の副作用

CSS レイアウトの世界では、overflow: hidden プロパティは制御において重要な役割を果たします。割り当てられたスペースを超えるコンテンツの動作。ただし、このプロパティを使用することによる予期しない副作用の 1 つは、浮動要素を収容するために外側の要素の高さが拡張される可能性があることです。

この現象を理解するために、次の例を考えてみましょう:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

overflow: hidden プロパティが .outer 要素に適用されると、2 つの float 要素 (.inner-left と .inner-left および .inner-left ) を囲むように高さが拡張されることがわかります。 .inner-right)。なぜこれが起こるのでしょうか?

その説明はブロックフォーマットコンテキストの概念にあります。表示されないオーバーフローのあるブロック ボックス (デフォルト) は、新しいブロック フォーマット コンテキストを作成します。新しいブロック書式設定コンテキストを作成するボックスは、ボックス自体に高さが指定されていない場合、高さによって浮動小数点を含むように拡張するように定義され、デフォルトは auto です。

上記の例では、.outer 要素には最初は明示的な要素がありません。高さ、デフォルトの auto 値になります。新しいブロック書式設定コンテキストが作成されるため、.outer 要素内のコンテンツが短くても、ボックスはその中の浮動要素の下端を収容するために引き伸ばされます。

この overflow: hidden の副作用は次のとおりです。フロートのクリアとは異なります。クリアは、clear プロパティが明示的に使用され、先行するフロートがクリアされる場合にのみ発生します。さらに、コンテナ要素の最後に高さゼロの要素または疑似要素を使用してクリアランスを強制しても (clearfix)、外側の要素の高さが伸びることはありません。

この動作を理解することは、効果的に管理するために重要です。レイアウトを強化し、CSS コードでの予期しない高さの拡張を防ぎます。ブロックの書式設定コンテキストとフロートのクリアランスの影響を考慮することで、デザインを微調整して、望ましい視覚的な結果を達成できます。

以上がCSS にフロート要素が含まれている場合、「overflow: hidden」によって高さが拡張されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。