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