Текст у родитељу флоатова у CSS

Хајде да уклонимо својство height за див и поставимо мали текст испред слике.

У овом случају висина нашег дива биће једнака висини текста, а слика ће и даље изаћи изван дива:

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

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

Результат:

Хајде да поставимо текст после слике - резултат се неће променити:

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

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

Результат:

Хајде да направимо да слика плута по левој ивици - резултат ће бити исти:

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

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

Результат:

Хајде да доле додамо још један див - слика ће прећи и преко њега:

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

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

Результат:

Ако се у први див дода толико текста да по висини буде већи од слике - она неће прећи на други див:

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

Результат:

Овај моменат је веома важан - током развоја може се десити да у неком блоку имате довољно текста, а онда при стварном раду сајта у том блоку буде мање текста него што је планирано. Испоставиће се да ће у том случају доћи до проблема са прелажењем плутајућих елемената преко суседних блокова.