フローティング要素は通常のページ フローとの接続をどのように維持するのでしょうか?

フローティング要素: フローとの関係を理解する

HTML と CSS の領域では、フローティング要素は独自の位置を占めます。これらは、ページ要素の通常の流れに沿って「浮いている」と言われていますが、その流れとのつながりは維持されています。この概念をさらに詳しく調べるために、サンプル コードを調べて 2 つの具体的な質問を検討してみましょう:

質問 1: 「フローのまだ一部」の意味

与えられた定義では、フロートはフローの一部のままであると規定されています。ただし、サンプル コードでは、2 番目の div (.left_second) が最初の div (.left) と重なっており、表面上はフローが中断されています。これをどうやって調和させることができるでしょうか?

鍵はテキストの動作にあります。 2 番目の div が最初の div の上に浮いている場合でも、テキストは両方の要素を回り込むことができます。これは、フロートが流れを完全に妨害するわけではないことを示す重要な兆候です。

例として、2 番目の div から float: left プロパティを削除すると、最初の div の右側に位置合わせされ、予想されるフローが復元されます。

質問 2: 含まれるブロックの外側の 3 番目の div

セクション コンテナー ブロック内に残る 1 番目と 2 番目の div とは対照的に、3 番目の div (.right ) はその境界の外側に表示されます。これは、float: right プロパティがあるためです。

float は、指定された側 (例: 左または右) に向かってドリフトする自然な傾向があります。セクション ブロック内の右側の 3 番目の div に隣接する追加のコンテンツがないため、コンテンツは外側に溢れ、コンテナから切り離されたような印象を与えます。

要約すると、フローティング要素は、セクション ブロックへの接続を維持します。物理的な位置を移動できるにもかかわらず、通常のページ フローです。これらは、テキストが周囲を回り込むことを許可すると同時に、隣接する要素との関係で独自の配置を変更することにより、フローに影響を与えます。この理解により、フローティング要素を使用した効果的かつ柔軟な Web レイアウトの基礎が提供されます。

以上がフローティング要素は通常のページ フローとの接続をどのように維持するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。