CSSでのタグの下にある浮動要素

ここで、2つの段落と、最初の段落内に配置された画像があるとします。 この画像には、floatプロパティが値rightで設定されており、半透明になっています。

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

では、HTMLコードで画像を最初の段落の後に配置するとどうなるか見てみましょう。

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

ご覧のとおり、画像は2番目の段落のテキストによって回り込まれていますが、1番目の段落のテキストでは回り込まれていません。

画像を2番目の段落の後ろに完全に移動してみましょう。この場合、画像は右に浮動しますが、回り込みは発生しません。

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

つまり、画像を回り込むのは、画像の下にある要素だけで、画像の上にある要素では回り込まないということです。