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

浮動要素とテキストの折り返し

CSS の複雑さをナビゲートしているときに、不可解な観察に遭遇したかもしれません。 float プロパティを使用して要素を分割すると、他の要素がその下に流れることができます。ただし、テキストの動作は異なり、浮動要素の下に降りるのではなく、浮動要素の周囲を包み込みます。

Float について

この動作は、float プロパティの動作方法の基本です。 CSS ドキュメントによると:

「float CSS プロパティは、コンテナの左側または右側に要素を配置し、テキストとインライン要素が要素を囲むことを許可します。要素は、 「

浮動要素の特性

浮動要素には 2 つの重要な特性があります:

1. 」 通常のフローから削除: 絶対配置の要素と同様に、他の要素はフローティング要素に重なったり、その逆も可能です。
2. テキストとインライン要素は回り込みます: テキストのみインラインレベルの要素は、浮動要素の重なりを避け、代わりにそれらを囲みます。

説明のための基本的な例

次の例を考えてみましょう:

<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>

この配置では、テキストレベルの要素であるため、青い div がフローティングの赤い div を囲みます。

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