オーバーフローを「可視」以外に設定すると、CSS2.1 で新しいブロック書式設定コンテキストが作成されるのはなぜですか?

なぜ CSS2.1 は新しいブロック書式設定コンテキストを確立するために「Visible」以外のオーバーフロー値を定義するのですか?

CSS2.1 では、「visible」以外のオーバーフロー値が使用されます。 " は、新しいブロック フォーマット コンテキスト (BFC) を確立するために指定されます。オーバーフローの本来の目的は、レイアウトに影響を与えずにオーバーフローを非表示にすることであるため、これは不可解かもしれません。

問題を深く掘り下げると、「表示」以外のオーバーフロー値が、BFC 作成とオーバーフローという 2 つの一見無関係な機能で構成されていることが明らかになります。隠蔽。ただし、歴史的に実証されているように、float は親要素を超えて拡張できるため、レイアウトを変更せずにオーバーフローを非表示にすることは理にかなっています。

決定の理由

この根拠決定は主にコンテンツのスクロールによって決まります。 CSS Working Group メーリング リストによると:

「仕様でこれが指定されていない場合、フロートがスクロール可能なコンテンツと交差する場合、ブラウザーはスクロール中にスクロール可能なコンテンツを (侵入するフロートの周囲で) 継続的に再ラップする必要があります。これにより、計算コストが高く、スクロールのパフォーマンスに悪影響を及ぼします。」

その仕組みWorks

次のシナリオを考えます: オーバーフローが「表示」に設定された 2 つの固定高ボックス。最初のボックスには親の高さを超えて広がるフロートが含まれています:

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

オーバーフローを「表示」のままにしておくと、コンテンツはスクロールの対象にならないので問題ありません。ただし、オーバーフローが「表示」以外の値に設定されている場合、コンテンツはボックスの境界によってクリップされ、スクロール可能になります。 2 番目のボックスにオーバーフロー: auto がある場合、次のようになります。

[オーバーフロー: auto を含む 2 つの固定高ボックスの画像]

フロートがスクロールを妨げるため、ブラウザーはコンテンツが表示されたままであることを確認します。スクロール中にコンテンツが再描画されるたびにこのプロセスを繰り返すと、パフォーマンスに悪影響を及ぼす可能性があります。

一貫性と非表示スクロール

もう 1 つの明らかな誤解は、オーバーフロー: 非表示のコンテナはコンテンツを単に非表示にするということです。そしてスクロールできません。スクロール用のユーザー インターフェイスはありませんが、scrollTop プロパティを調整することでプログラムでコンテンツをスクロールすることは可能です。この場合でも、float の隠蔽を避けるためにコンテンツを再ラップする必要があります。

したがって、「visible」以外のオーバーフロー値は一貫性を保つために BFC になります。

CSS2.1 の変更点

CSS2.1 では、 「visible」以外のオーバーフロー値により、要素が float と相互作用する方法が変更されました。

• オーバーフローのあるボックス全体は、コンテンツをカプセル化する BFC を作成するため、フロートから脇に押しやられます。
• 高さ: auto のボックスと BFC は、フロートを収容するために垂直方向に伸縮します。彼らの流入に合わせるだけcontent.

概要

BFC の作成を「可視」以外のオーバーフロー値にリンクする決定は、主にパフォーマンスを考慮し、プログラムとの一貫性を確保するために行われました。スクロール。一見矛盾した動作にもかかわらず、フロートを含む複雑なシナリオでレイアウトとスクロールの整合性を維持するのに役立ちます。

以上がオーバーフローを「可視」以外に設定すると、CSS2.1 で新しいブロック書式設定コンテキストが作成されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。