Właściwość clear

Właściwość clear anuluje opływanie jednego elementu przez inne, określone właściwością float. Może przyjmować następujące wartości: none (anuluje działanie samej siebie), both (anuluje float jednocześnie z prawej i lewej strony), left (anuluje float z lewej strony), right (anuluje float z prawej strony).

Składnia

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

Przykład

Anulujmy opływanie obrazka tekstem z lewej strony:

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

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

Результат:

Przykład

Teraz anulujmy opływanie obrazka tekstem z prawej strony:

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

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

Результат:

Przykład

Anulujmy działanie samej właściwości clear:

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

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

Результат:

Zobacz też