Propriété clear

La propriété clear annule l'habillage d'un élément par d'autres, défini par la propriété float. Peut prendre les valeurs suivantes : none (annule sa propre action), both (annule float simultanément à droite et à gauche), left (annule float à gauche), right (annule float à droite).

Syntaxe

csssélecteur {
  clear: none ou left ou right ou both
}

Exemple

Annulons l'habillage de l'image par le texte à gauche :

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

Результат:

Exemple

Maintenant, annulons l'habillage de l'image par le texte à droite :

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

Результат:

Exemple

Annulons l'action de la propriété clear elle-même :

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

Результат:

Voir aussi