フローティング要素によりテキストが下に移動せずに折り返されるのはなぜですか?

テキストがフローティング要素の下に移動するのではなく、フローティング要素の周りを回り込むのはなぜですか?

div をフローティングすると、テキストが回り込むという直感に反するように見える場合があります他の要素のようにその下に移動するのではなく、その周囲に移動します。目的のレイアウトを実現するには、float の動作の仕組みを理解することが重要です。

Float プロパティの説明

CSS ドキュメントによると、float プロパティは次のとおりです。

「コンテナの左側または右側に要素を配置し、テキストやインライン要素が要素を囲むようにします。要素はページの通常のフローから削除されますが、フローの一部は残ります。」

フロート要素の主な機能

考慮すべきフロート要素の 2 つの重要な側面:

• 通常のフローからの削除: が可能他の要素がフロート要素に重なり合うか、フロート要素によってオーバーラップされます。
• テキストの折り返し: テキストとインラインレベルの要素のみがフロート要素の周囲にラップされます。

例

以下のコードでは、赤い div が左にフローティングされ、青い div がそれを囲みます。

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

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

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

以上がフローティング要素によりテキストが下に移動せずに折り返されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。