Plovoucí prvky pod tagy v CSS

Představme si, že nyní máme dva odstavce a obrázek, umístěný v prvním odstavci. Předpokládejme, že tomuto obrázku je nastavena vlastnost float s hodnotou right, a také poloprůhlednost:

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

Результат:

A nyní umístěme v HTML kódu obrázek za první odstavec a podívejme se, co se stane:

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

Результат:

Jak vidíme, obrázek obtéká text druhého odstavce, ale ne prvního.

Přesuňme náš obrázek úplně za druhý odstavec. V tomto případě bude plavat vpravo, ale k žádnému obtékání nedojde:

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

Результат:

Vychází to tak, že obrázek budou obtékat pouze ty prvky, které se nacházejí pod ním, ale ne ty, které se nacházejí nad ním.