Vlastnost clear

Vlastnost clear zruší obtékání jednoho elementu ostatními, nastavené vlastností float. Může nabývat následujících hodnot: none (zruší účinek sebe sama), both (zruší float současně zprava i zleva), left (zruší float zleva), right (zruší float zprava).

Syntaxe

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

Příklad

Zrušme obtékání obrázku textem zleva:

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

Результат:

Příklad

Nyní zrušme obtékání obrázku textem zprava:

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

Результат:

Příklad

Zrušme účinek samotné 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;
}

Результат:

Viz také