CSSにおけるフロート親要素内のテキスト

height プロパティをdivから取り除き、 画像の前に短いテキストを配置してみましょう。

この場合、divの高さはテキストの高さと等しくなりますが、 画像は依然としてdivからはみ出します：

html<div>
  テキスト
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

テキストを画像の後に配置してみても、 結果は変わりません：

html<div>
  <img src="img.png" alt="">
  テキスト
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

今度は、画像を左端にフロートさせてみましょう。 結果は同様です：

html<div>
  <img src="img.png" alt="">
  テキスト
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

下部にもう一つdivを追加すると、 画像はそのdivにも重なります：

html<div>
  <img src="img.png" alt="">
  テキスト
</div>
<div>
  テキスト
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

しかし、最初のdivに画像の高さを超える十分な量の テキストを追加すると、画像は2番目のdivには 重ならなくなります：

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  テキスト
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

この点は非常に重要です。開発中はあるブロックに 多くのテキストがあるかもしれませんが、実際の サイト運用時には予定より少ないテキストしか 入らない場合があります。その結果、 フロート要素が隣接するブロックに重なる問題が 表面化する可能性があります。