Sifa clear

Sifa clear inafuta mtiririko wa kipengele kimoja na kingine, uliobainishwa na sifa float. Inaweza kukubali maadili yafuatayo: none (inafuta utendakazi wake mwenyewe), both (inafuta float wakati huo huo kulia na kushoto), left (inafuta float kushoto), right (inafuta float kulia).

Kiufundi

csskichagua {
  clear: none au left au right au both
}

Mfano

Wacha tufute mtiririko wa picha na maandishi upande wa kushoto:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Mfano

Sasa wacha tufute mtiririko wa picha na maandishi upande wa kulia:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Mfano

Wacha tufute utendakazi wa sifa yenyewe clear:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
    maandishi maandishi maandishi maandishi maandishi maandishi
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Angalia pia