Lastnost clear

Lastnost clear prekliče obtekajoči slog enega elementa z drugimi, določen z lastnostjo float. Lahko sprejme naslednje vrednosti: none (prekliče delovanje samega sebe), both (prekliče float hkrati na desni in levi), left (prekliče float na levi), right (prekliče float na desni).

Sintaksa

cssselektor {
  clear: none ali left ali right ali both
}

Primer

Prekličimo obtekajoči slog slike z besedilom na levi:

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

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

Результат:

Primer

Zdaj pa prekličimo obtekajoči slog slike z besedilom na desni:

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

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

Результат:

Primer

Prekličimo delovanje same lastnosti clear:

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

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

Результат:

Glejte tudi