Flytende elementer under tagger i CSS

La oss si at vi nå har to avsnitt og et bilde, plassert i det første avsnittet. La oss si at dette bildet har egenskapen float med verdien right, og også gjennomsiktighet:

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

Результат:

Og la oss nå sette bildet i HTML-koden etter det første avsnittet og se hva som skjer:

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

Результат:

Som vi ser, flyter teksten i det andre avsnittet rundt bildet, men ikke det første.

La oss flytte bildet vårt helt etter det andre avsnittet. I dette tilfellet vil det flyte til høyre, men det vil ikke være noen flyting rundt:

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

Результат:

Det viser seg at bare de elementene som befinner seg under bildet, vil flyte rundt det, men ikke de som befinner seg over det.