Besedilo v staršu plavajočih elementov v CSS

Odstranimo lastnost height za div in postavimo majhno besedilo pred sliko.

V tem primeru bo višina našega div enaka višini besedila, slika pa bo še vedno štrlela izven div:

html<div>
  besedilo
  <img src="img.png" alt="">
</div>

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

Результат:

Postavimo besedilo za sliko - rezultat se ne spremeni:

html<div>
  <img src="img.png" alt="">
  besedilo
</div>

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

Результат:

Naredimo, da slika plava na levi strani - rezultat bo podoben:

html<div>
  <img src="img.png" alt="">
  besedilo
</div>

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

Результат:

Spodaj dodajmo še en div - slika bo posegla tudi nanj:

html<div>
  <img src="img.png" alt="">
  besedilo
</div>
<div>
  besedilo
</div>

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

Результат:

Če pa v prvi div dodamo toliko besedila, da bo po višini večji od slike - ta ne bo posegala v drugi div:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  besedilo
</div>

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

Результат:

Ta trenutek je zelo pomemben - pri razvoju se lahko zgodi, da imate v nekem bloku precej besedila, nato pa se ob dejanskem delovanju spletnega mesta v tem bloku prikaže manj besedila, kot je bilo načrtovano. Izkazalo se bo, da se v tem primeru pojavi težava s poseganjem plavajočih elementov v sosednje bloke.