Maandishi kwenye mzazi wa floats katika CSS

Wacha tuondoe sifa height kwa div na tuweke maandishi machache kabla ya picha.

Katika hali hii, urefu wa div yetu utakuwa sawa na urefu wa maandishi, na picha bado itatokeza nje ya div:

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

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

Результат:

Wacha tuweke maandishi baada ya picha - matokeo hayatabadilika:

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

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

Результат:

Wacha tufanye ili picha ielee upande wa kushoto - matokeo yatakuwa sawa:

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

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

Результат:

Wacha tuongeze div nyingine chini - picha itaingilia juu yake:

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

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

Результат:

Ikiwa kwenye div ya kwanza tunaongeza maandishi mengi sana kiasi kwamba kwa urefu utakuwa mkubwa kuliko picha - haitaingilia kwenye div ya pili:

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

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Huu wakati ni muhimu sana - wakati wa ukuzaji inavyowezekana kuwa katika kituo fulani una maandishi mengi, na kisha wakati wa kazi halisi ya wavuti kwenye kituo hiki kutakuwa na maandishi machache zaidi kuliko yaliyopangwa. Inageuka kuwa katika kesi hii tatizo la vitu vinavyoelea kukabiliana na vitalu vya jirani litaonekana.