CSS では、overflow: hidden は新しいブロックレベルの書式設定コンテキストを作成しますか?

ブロック フォーマット コンテキスト (BFC) は、CSS の Web ページ レイアウトの一部であり、要素が配置され、相互に作用します。簡単に言うと、コンテナ内で要素がどのように動作するかについての一連のルールを定義するコンテナのようなものです。

この記事では、「overflow:hidden は CSS に新しいブロック書式設定コンテキスト (BFC) を作成しますか?」

答えは「はい」です。CSS では、overflow:hidden 属性によって新しいブロックレベルの書式設定コンテキスト (BFC) を作成できるからです。 HTML 要素のオーバーフロー値が表示されない場合 (デフォルト値)、新しい BFC の作成がトリガーされます。 BFC はマージンの崩れを防ぎ、正しい位置を維持し、偶発的な重なりを防ぎ、読者が 2 つの異なる要素間のコントラストを認識できるようにします。

ここで、オーバーフローの影響を理解するために次の例を見てみましょう: BFC 作成時に隠蔽 -

Example

の中国語訳は次のとおりです:

Example

以下の例では、CSS overflow:hidden プロパティを使用せずに「コンテナ」のスタイルを設定します。

リーリー

出力から、コンテナ内のテキストが境界を超えていることがわかります。したがって、コンテナの外側に広がり、Web ページ上の他の要素と重なり、レイアウトが崩れる可能性があります。

Example

の中国語訳は次のとおりです:

Example

次の例では、CSS Overflow:hidden プロパティを使用して「コンテナ」のスタイルを設定します -

リーリー

overflow:hidden 属性をコンテナに追加すると、新しい BFC が作成されます。したがって、テキストがコンテナの高さを超える場合、テキストは切り取られて表示されなくなります。ただし、オーバーフローしたテキストはコンテナ内に残ります。

以上がCSS では、overflow: hidden は新しいブロックレベルの書式設定コンテキストを作成しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。