Kufuta Mkondo kwa kutumia Sifa ya clear katika CSS

Kwa ajili ya kutatua tatizo kama hilo kuna sifa maalum clear, ambayo hufuta mkondo. Thamani left hufuta mkondo wa kushoto, thamani right - kulia, na thamani both - kutoka pande zote mbili. Thamani hii ndiyo hutumiwa mara nyingi zaidi.

Kwa hivyo, sifa clear hufuta mkondo. Katika kesi yetu hii itaturuhusu kufanya hivi, ili picha inayoelea kutoka kwa div ya kwanza isichanganyike na div ya pili.

Wakati huo huo clear inapaswa kutolewa kwa kitu ambacho vitu vinavyoelea havipaswi kukichanganya, yaani katika kesi yetu inafaa kutolewa kwa div ya pili.

Wacha tufanye hivi - tupe div ya pili badala ya darasa parent na pia darasa clearfix na kwa darasa hili jipya tuweke sifa clear kwa thamani both - kuchanganyika kwa picha kitatoweka:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

Jina clearfix linakubalika kwa ujumla, kwa hivyo katika siku zijizo tumia hasa hilo.