Proprietà clear

La proprietà clear annulla la disposizione a flusso laterale di un elemento da parte di altri, impostata dalla proprietà float. Può accettare i seguenti valori: none (annulla l'azione di se stessa), both (annulla float simultaneamente a destra e a sinistra), left (annulla float a sinistra), right (annulla float a destra).

Sintassi

cssselettore {
  clear: none o left o right o both
}

Esempio

Annulliamo la disposizione a flusso laterale dell'immagine da parte del testo a sinistra:

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

Результат:

Esempio

Ora annulliamo la disposizione a flusso laterale dell'immagine da parte del testo a destra:

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

Результат:

Esempio

Annulliamo l'azione della proprietà clear stessa:

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

Результат:

Vedi anche