Egenskapen clear

Egenskapen clear avbryter omslutning av ett element av andra, som definierats av egenskapen float. Kan ta följande värden: none (avbryter sin egen funktion), both (avbryter float samtidigt till höger och vänster), left (avbryter float till vänster), right (avbryter float till höger).

Syntax

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

Exempel

Låt oss avbryta omslutningen av bilden med text till vänster:

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;
}

Результат:

Exempel

Nu låter oss avbryta omslutningen av bilden med text till höger:

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;
}

Результат:

Exempel

Låt oss avbryta funktionen av själva egenskapen clear:

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;
}

Результат:

Se även