Athari ya Vitu Vinavyoelea kwa Mzazi katika CSS

Hebu sasa tuwe na div, ambayo ina picha ndani yake. Tuweke mpaka kwa div, na kwa picha tusiipe sifa ya float.

Hebu tuone jambo hili litakavyoonekana kivinjari:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Sasa tuweke kwa picha sifa float kwa thamani left. Katika kesi hili jambo la kushangaza litatokea - urefu wa mzazi utatoweka, mpaka wake wa chini utaanza mara baada ya wa juu, na picha itatoka nje chini ya mzazi wake:

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

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

Результат:

Inabadilika kuwa vipengele ambavyo vimepewa sifa float, haviongezi urefu wa mzazi wao.

Hebu badala ya left tuandike thamani right kwa sifa float. Tabia ya mzazi haitabadilika, lakini picha itaanza kulea upande wa kulia:

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

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

Результат: