フローティング要素の周りでテキストが回り込むのはなぜですか?

テキストの折り返しの異常: テキストがフロートの周りを流れるのはなぜですか?

Web ページ上に要素を配置するとき、HTML 要素のデフォルトの動作は次のとおりです。通常のドキュメント フローで指定されているように、上から下にフローします。ただし、Float プロパティが要素に適用されると、この動作は変わります。

Floating Elements: Breaking the Flow

Float は、要素を左側または右側に配置します。コンテナの周囲にテキストとインライン要素が回り込むようになります。これは、フロート要素がページの通常のフローから削除されるためです。つまり、絶対に配置された要素と同様に、他の要素が重なったり重なったりする可能性があります。

テキスト要素とインライン要素: 唯一例外

他のすべての要素はフロート要素の位置の影響を受けますが、テキスト要素とインライン要素は例外です。これらはフロート要素の周りを回り続け、重なりを避けます。

フロートのプロパティを理解する

CSS ドキュメントによると、

• フロートCSS プロパティは要素をコンテナの左側または右側に配置し、テキストやインライン要素が要素を囲むことを許可します。
• 要素はページの通常のフローから削除されますが、ページの一部は残ります。 flow.

これらのプロパティに基づいて、次のように結論付けることができます:

• 通常のフローから削除: フロート要素は重複する可能性がある、または他の要素と重複する可能性があります。通常のフロー内の要素。
• テキスト要素とインライン要素のラップ例外: これらの要素は、位置に関係なく、常に浮動要素の周りをラップします。

動作例

次の HTML および CSS コードを考えてみましょう:

<code class="html"><div class="float"></div>
<div class="blue"></div></code>

<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>

この例では、クラス「float」を持つ赤い div が配置されます。左側に、クラス「blue」を持つ青い div がその下に配置されます。ただし、赤と青の div の間に表示されるテキストはすべて赤の div の周囲に回り込み、テキスト フローの整合性が維持されます。

以上がフローティング要素の周りでテキストが回り込むのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。