Текст во родител на флоати во 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;
}

Результат:

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