なぜ CSS2.1 はブロック書式設定コンテキストを作成するために「visible」以外の「overflow」を使用するのでしょうか?

CSS2.1 では、新しいブロック フォーマット コンテキストを確立するために「Visible」以外のオーバーフロー値が必須なのはなぜですか?

CSS2.1 では、 "visible" 以外のオーバーフロー値を指定すると、新しい "ブロック フォーマット コンテキスト" が作成されます。この決定により、ブロック フォーマット コンテキスト (BFC) の作成とオーバーフローの抑制という、一見無関係に見える 2 つの機能を組み合わせる背後にある理論的根拠について疑問が生じました。

歴史的背景と重要な考慮事項

CSS メーリング リストで行われた問い合わせによると、この決定は、交差するボックス内のスクロールに対処する必要性から生じています。浮く。元の CSS 2.0 仕様では、ブラウザがスクロール中に侵入するフロートの周囲でコンテンツを再ラップする必要があり、パフォーマンスの問題が発生しました。

CSS2.1 修正では、「visible」以外のオーバーフロー値に新しい BFC を確立することで、この再ラップを防止しています。これにより、次のことが保証されます。

• 新しい BFC 内のコンテンツは float の影響を受けません。
• BFC のスクロール動作は、float の存在による影響を受けません。

例

次のことを考えてみましょう例:

<div>...</div>
<div>
  ...:
  ...:
</div>

div {
  height: 80px;
}

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

CSS 2.0 では、overflow:visible (デフォルト) を使用すると、2 番目のボックスが浮動要素に重なります。ただし、オーバーフロー: 自動 (CSS 2.1) の場合、2 番目のボックスは新しい BFC を取得し、フロートがそのコンテンツと交差するのを防ぎます。

オーバーフローの影響: 非表示

overflow: hidden は通常、オーバーフローしたコンテンツを非表示にしますが、プログラムによるスクロールは可能です。これは重要です。交差するフロートを含む overflow: hidden ボックスも、スクロール中の再折り返しを防ぐために新しい BFC を確立する必要があるためです。

CSS2.1 で導入された変更点

CSS2 .1 では追加の変更が導入されています:

• ブロックの書式設定コンテキスト ルート要素 (要素
• オーバーフロー: 非表示および高さ: 自動のボックスはコンテナの境界によって制限され、フロートと交差できなくなりました。

一貫性とパフォーマンス

最終的には、 「可視」以外のオーバーフロー値に対して新しい BFC を作成するのは、主にパフォーマンスの考慮事項と、オーバーフローするコンテンツの処理における一貫性への要望によって決まりました。このアプローチにより、スクロールのパフォーマンスが最適化され、予測可能なレイアウトが維持されます。

以上がなぜ CSS2.1 はブロック書式設定コンテキストを作成するために「visible」以外の「overflow」を使用するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。