Īpašība clear

Īpašība clear atceļ elementa applūšanu ar citiem elementiem, kuru nosaka īpašība float. Tai var būt šādas vērtības: none (atceļ pašas sevis darbību), both (atceļ float vienlaicīgi pa labi un pa kreisi), left (atceļ float pa kreisi), right (atceļ float pa labi).

Sintakse

cssselektors {
  clear: none vai left vai right vai both
}

Piemērs

Atcelsim attēla applūšanu ar tekstu pa kreisi:

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

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

Результат:

Piemērs

Tagad atcelsim attēla applūšanu ar tekstu pa labi:

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

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

Результат:

Piemērs

Atcelsim pašas īpašības clear darbību:

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

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

Результат:

Skatiet arī