Text în părintele float-urilor în CSS

Să eliminăm proprietatea height pentru div și să punem un text scurt înaintea imaginii.

În acest caz, înălțimea div-ului nostru va fi egală cu înălțimea textului, iar imaginea va ieși în continuare în afara div-ului:

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

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

Результат:

Să punem textul după imagine - rezultatul nu se va schimba:

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

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

Результат:

Să facem ca imaginea să plutească în partea stângă - rezultatul va fi similar:

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

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

Результат:

Să adăugăm încă un div dedesubt - imaginea va intra și peste acesta:

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

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

Результат:

Dacă însă în primul div se adaugă atât de mult text, încât pe înălțime va fi mai mare decât imaginea - aceasta nu va intra peste al doilea 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;
}

Результат:

Acest aspect este foarte important - în timpul dezvoltării poate fi ca într-un bloc să aveți destul de mult text, iar apoi în funcționarea reală a site-ului în acest bloc va fi mai puțin text decât a fost planificat. Se va dovedi că în acest caz va apărea problema cu pătrunderea elementelor plutitoare în blocurile învecinate.