Tekst u roditelju float-ova u CSS

Hajde da uklonimo svojstvo height za div i stavimo mali tekst ispred slike.

U ovom slučaju visina našeg div-a će biti jednaka visini teksta, a slika će i dalje izlaziti izvan div-a:

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

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

Результат:

Hajde da stavimo tekst iza slike - rezultat se neće promeniti:

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

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

Результат:

Hajde da učinimo da slika pluta (float) uz levu ivicu - rezultat će biti sličan:

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

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

Результат:

Hajde da dodamo još jedan div ispod - slika će se nalepiti i na njega:

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

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

Результат:

Ako u prvi div dodamo toliko teksta, da po visini bude veći od slike - ona se neće nalepiti na drugi div:

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

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

Результат:

Ovaj momenat je veoma važan - tokom razvoja može se desiti da u nekom bloku imate dosta teksta, a onda pri realnom radu sajta u tom bloku bude manje teksta nego što je planirano. Ispostaviće se da će u ovom slučaju isplivati problem nalepljivanja plutajućih elemenata na susedne blokove.