オーバーフローとレイアウトコンテキスト (BFC)_html/css

HTML は流動的なレイアウトを採用しており、この環境では CSS float が非常に重要です。フロートは、オーバーフローによって新しい BFC が作成され、レイアウトに影響を与えるため、オーバーフローと組み合わせて使用されることがよくあります。この記事では、オーバーフローがフローティングに及ぼす影響を、サラウンドのクリア、フローティング要素のラップ、独立したレイアウト環境の 3 つの側面から紹介します。その前に、まず BFC とは何かを理解しましょう。

BFC (ブロックフォーマットコンテキスト、レイアウトコンテキスト) は、CSS レンダリングプロセス中にレイアウトされるボックスであり、すべての浮動子要素がボックス内にレイアウトされます。言い換えれば、BFC 内のフローティング要素は BFC の外側に影響を与えず、BFC の外側の環境は BFC 内のレイアウトに影響を与えません。 MDN には、BFC を生成できる要素の合計 8 種類がリストされています。これには、浮動要素と絶対配置要素、インラインブロック、表示されないオーバーフローのある要素が含まれます。 を overflow:hidden に設定すると、BFC を開くことができることがわかります。

BFC は、ブロックレベルの書式設定コンテキストとして翻訳されることがよくありますが、実際には、レイアウトコンテキストの方が適切だと思います。基本的に、BFC は長方形のブロックの独立したレイアウト環境です。

参考: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

ラッピング効果のクリア

および他の流体ドキュメント (Microsoft Word ドキュメントを含む) と同様に、CSS ではラップアラウンドレイアウトをサポートするためにフロートの概念が導入されました。後続のドキュメントフローがフローティング要素を囲むようにします。例:

<div style="border:1px solid #000;width:300px;">  <div style="float:left;background: yellow;height:100px;width:150px;">float:left</div>   <div> Eros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum.  Leo diam interdum ligula, eu scelerisque sem purus in tellus.</div></div>

ログイン後にコピー

左側の

は左側のフローティング要素を囲みます。

float:left

サピエンモレスティロンカスのエロス。列レイアウトでは、周囲の影響をクリアする必要があります。これを行うにはいくつかの方法があります:

margin-left を右

に追加します。

今回紹介する方法は、右側の
にoverflow:hiddenを設定する方法です。このようにして、BFC は右側に形成され、その内部レイアウトは外部フロートの影響を受けないため、左側の
を囲みません。

効果は次のとおりです:

<div style="float:left;border:1px solid #000;width:300px;">  <div style="background: yellow;height:100px;width:150px;">float:left</div>   <div style="overflow:hidden"> Eros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum.  Leo diam interdum ligula, eu scelerisque sem purus in tellus.</div></div>

ログイン後にコピー

float:left

サピエンモルスティロンカスのエロス。 nisl.Praesent venenatis blandit velit では、親要素が子要素をラップするようにするにはどうすればよいでしょうか。

これは、フロントエンド開発において非常に一般的なレイアウトの問題です。フローティングの子要素がある場合、親要素の高さが子要素の高さよりも小さくなる場合があります。たとえば、親要素の背景を赤に設定します。

子要素は終わりです。親要素の赤い背景は、子要素には完全には適用されません。

子

親

このとき、親要素にoverflow:hiddenを設定するとBFCになります。

<div style="background:red;width:300px;">  <div style="width:150px;height:100px;float:left;border:1px solid #000;">Child</div>  Parent</div>

ログイン後にコピー

BFC の内部要素は外部に影響を与えることができないため、浮動子要素を親要素の外部に表示することはできません。親要素の高さはゼロです。子要素は表示されません。この時点で、CSS は親要素を使用して子要素をラップすることを決定します。したがって、親要素は子要素と同じ高さになり、赤い背景が表示されます。

子

親

独立したレイアウト環境

<div style="overflow:hidden;background:red;width:300px;">  <div style="width:150px;height:100px;float:left;border:1px solid #000;">Child</div>  Parent</div>

ログイン後にコピー

overflow:hidden はレイアウトコンテキスト (BFC) を開くことができ、内部レイアウトは影響を受けません。外側。これは、ネストされたフロートレイアウトで役立ちます。次のシナリオを考えてみましょう:

ページ全体が 2 列レイアウトを採用しています。左側は固定幅のサイドバーで左側にフロートし、右側はコンテンツアダプティブです。右側のコンテンツにユーザー一覧を表示する予定です。

各ユーザーの内部レイアウトに何らかのフロートがある場合は、ユーザーごとにフロートをクリアする必要があります。何が起こるでしょうか？

サイドバー

ユーザー: アリス

<div style="width:320px;border:1px solid black;">  <div style="float:left;width:100px;background:yellow;height:200px;">Sidebar</div>  <div>    <p style="background:lightblue;"> User: Alice </p>    <div style="clear: both;"></div>    <p style="background:lightblue;"> User: Bob </p>    <div style="clear: both;"></div>    <p style="background:lightblue;"> User: Charlie </p>  </div></div>

ログイン後にコピー

ユーザー: ボブ

ユーザー: チャーリー

clear:both (ユーザーリスト内) は、ページレイアウト全体のフローティングをクリアします。 2 番目のユーザーから始めて、すべてサイドバーの下に移動します。適切なコンテナに独立したレイアウト環境を作成するには、overflow:hidden を適切なコンテナに追加します。

overflow:hidden を設定する右側の

BFC (レイアウトコンテキスト) としてレンダリングされるため、外部フローティング要素 (サイドバー) は BFC の内部レイアウトに影響しません:

サイドバー

ユーザー: Alice

<div style="width:320px;border:1px solid black;">  <div style="float:left;width:100px;background:yellow;height:200px;">Sidebar</div>  <div style="overflow:hidden">    <p style="background:lightblue;"> User: Alice </p>    <div style="clear: both;"></div>    <p style="background:lightblue;"> User: Bob </p>    <div style="clear: both;"></div>    <p style="background:lightblue;"> User: Charlie </p>  </div></div>

ログイン後にコピー

ユーザー: ボブ

ユーザー: チャーリー