Veprimi i float-eve në prind në CSS

Le të themi se tani kemi një div, brenda të cilit ndodhet nje imazh. Div-it do t'i caktojmë një kufi, kurse imazhit për momentin nuk do t'i caktojmë vetinë float.

Le të shohim se si do të duket kjo në shfletues:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Tani le t'i vendosim imazhit vetinë float me vlerën left. Në këtë rast do të ndodhë diçka e mahnitshme - lartësia e prindit do të zhduket, kufiri i poshtëm i tij do të filloje menjëherë pas së sipërmes, kurse imazhi do të dalë jashtë nga fundi i prindit të tij:

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

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

Результат:

Del pra, se elementëve, të cilëve u është caktuar vetia float, nuk e zgjasin prindin e tyre në lartësi.

Le t'i vendosim vetisë float në vend të left vlerën right. Sjellja e prindit nuk do të ndryshojë, por imazhi do të fillojë të notojë nga e djathta:

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

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

Результат: