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
selettore {
clear: none o left o right o both
}
Esempio
Annulliamo la disposizione a flusso laterale dell'immagine da parte del testo a sinistra:
<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>
.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:
<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>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
Esempio
Annulliamo l'azione della proprietà
clear stessa:
<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>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Vedi anche
-
la proprietà
bottom,
che imposta la posizione del bordo inferiore dell'elemento -
la proprietà
top,
che imposta la posizione del bordo superiore dell'elemento -
la proprietà
left,
che imposta la posizione del bordo sinistro dell'elemento -
la proprietà
right,
che imposta la posizione del bordo destro dell'elemento -
lo pseudo-elemento
::backdrop,
che imposta il posizionamento dopo il primo elemento -
la proprietà
caption-side,
che imposta la posizione della didascalia della tabella