Utangulizi wa Kipengele cha float katika CSS

Acha tuwe na div maandishi marefu. Wacha tuweke picha mwanzoni mwa maandishi hayo:

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

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

Kama unavyoona, chini ya picha iko kwenye mstari wa kwanza wa maandishi, na sehemu iliyobaki inakwenda juu. Upande wa kulia wa picha kuna nafasi kubwa tupu. Wacha tufanye ili maandishi yajaze nafasi hii tupu. Kwa hili tuweke kipengele float kwenye picha kwa thamani left:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

Kwa hiyo, sasa picha inaelea kushoto, na maandishi yanaizunguka ipasavyo kulia. Wakati huo huo nafasi tupu kando ya picha imetoweka.

Pia inawezekana kufanya picha ielee sio kushoto, bali kulia. Kwa hili float tuweke kwa thamani right:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: