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 を右
効果は次のとおりです:
<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>
ページ全体が 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 を設定する右側の
ユーザー: 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>
ユーザー: チャーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
