Pływające elementy pod tagami w CSS

Załóżmy, że mamy teraz dwa akapity i obrazek, umieszczony w pierwszym akapicie. Załóżmy, że temu obrazkowi ustawiliśmy właściwość float na wartość right, a także półprzezroczystość:

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 teraz ustawmy w kodzie HTML obrazek po pierwszym akapicie i zobaczmy, co się stanie:

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 widzimy, obrazek jest opływany przez tekst drugiego akapitu, ale nie pierwszego.

Przenieśmy nasz obrazek całkowicie za drugi akapit. W tym przypadku będzie on pływał po prawej stronie, ale nie będzie żadnego opływania:

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

Результат:

Okazuje się, że obrazek będzie opływany tylko przez te elementy, które znajdują się pod nim, ale nie przez te, które znajdują się nad nim.