Savybė clear

Savybė clear atšaukia suplyšiojimą vieno elemento kitais, nurodytą savybe float. Gali priimti šias reikšmes: none (atšaukia paties savęs veikimą), both (atšaukia float vienu metu ir iš dešinės, ir iš kairės), left (atšaukia float iš kairės), right (atšaukia float iš dešinės).

Sintaksė

cssselektorius {
  clear: none arba left arba right arba both
}

Pavyzdys

Atšaukime paveikslėlio supyliojimą tekstu iš kairės:

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

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

Результат:

Pavyzdys

Dabar atšaukime paveikslėlio supyliojimą tekstu iš dešinės:

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

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

Результат:

Pavyzdys

Atšaukime paties savybės clear veikimą:

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

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

Результат:

Taip pat žiūrėkite