Eigenschaft clear

Die Eigenschaft clear hebt das Umfließen eines Elements durch andere, das durch die Eigenschaft float festgelegt wurde, auf. Kann die folgenden Werte annehmen: none (hebt die eigene Wirkung auf), both (hebt float gleichzeitig rechts und links auf), left (hebt float links auf), right (hebt float rechts auf).

Syntax

cssSelektor {
  clear: none oder left oder right oder both
}

Beispiel

Lassen Sie uns das Umfließen des Bildes durch Text links aufheben:

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

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

Результат:

Beispiel

Lassen Sie uns nun das Umfließen des Bildes durch Text rechts aufheben:

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

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

Результат:

Beispiel

Lassen Sie uns die Wirkung der Eigenschaft clear selbst aufheben:

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

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

Результат:

Siehe auch