Vlastnosť clear

Vlastnosť clear zruší obtok jedného elementu inými, zadaný vlastnosťou float. Môže nadobúdať nasledujúce hodnoty: none (zruší pôsobenie seba samého), both (zruší float súčasne vpravo a vľavo), left (zruší float vľavo), right (zruší float vpravo).

Syntax

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

Príklad

Zrušme obtok obrázka textom zľava:

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

Результат:

Príklad

Teraz zrušme obtok obrázka textom sprava:

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

Результат:

Príklad

Zrušme pôsobenie samotnej vlastnosti 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;
}

Результат:

Pozrite tiež