Proprietà CSS clear
La proprietà CSS clear definisce su quali lati non è consentito il floating. Scopri esempi pratici e provali.
La proprietà clear è direttamente correlata ai float. Controlla se un elemento può affiancarsi a un elemento flottante precedente oppure se deve essere spostato in basso (cleared) al di sotto di esso.
Quando un elemento è flottante, il contenuto che lo segue si avvolge attorno al float. clear consente di interrompere questo avvolgimento: un elemento con clear applicato scende al di sotto del bordo inferiore dei float sul lato specificato invece di scorrere accanto ad essi.
Questa pagina illustra cosa fa ciascun valore di clear, il motivo più comune per utilizzare clear (il pattern "clearfix" per contenere i float) e le insidie da tenere a mente.
Come funziona clear
clear accetta i valori none, left, right, both, initial e inherit:
none— valore predefinito. L'elemento può affiancarsi ai float su entrambi i lati.left— l'elemento viene spostato sotto qualsiasi float a sinistra che lo precede.right— l'elemento viene spostato sotto qualsiasi float a destra che lo precede.both— l'elemento viene spostato sotto tutti i float su entrambi i lati. È il valore che si usa nella maggior parte dei casi.
Nota: clear reagisce solo ai float che appaiono prima nel sorgente e influisce solo sugli elementi nel flusso normale dei blocchi. Non ha alcun effetto all'interno dei layout Flexbox o Grid, dove float stesso viene ignorato.
Quando usare clear?
L'uso più comune di clear è contenere i float. Un elemento padre che contiene solo figli flottanti collassa ad altezza zero, perché i float sono sottratti al flusso normale. La soluzione classica — il "clearfix" — aggiunge uno pseudo-elemento cleared dopo i float in modo che il padre si estenda per avvolgerli:
/* Clearfix: makes a container wrap its floated children */
.container::after {
content: "";
display: block;
clear: both;
}L'altro uso comune è forzare un footer, un'intestazione o un'interruzione di sezione a iniziare sotto un'immagine flottante o una barra laterale invece di scorrere accanto ad essa — esattamente ciò che mostrano gli esempi seguenti.
| Valore iniziale | none |
|---|---|
| Si applica a | Elementi a livello di blocco. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | element.style.clear = "both"; |
Sintassi
Sintassi della proprietà CSS clear
clear: none | left | right | both | initial | inherit;Esempio della proprietà clear:
Esempio della proprietà CSS clear con valore left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Risultato
Esempio della proprietà clear con il valore "right":
Esempio della proprietà CSS clear con valore right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Esempio della proprietà clear con il valore "both":
Esempio della proprietà CSS clear con valore both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Esempio del pattern clearfix
Questo è clear che svolge il suo compito più utile: senza la regola clearfix, il riquadro con bordo collasserebbe ad altezza zero perché il suo unico figlio è flottante. Lo pseudo-elemento ::after con clear: both costringe il riquadro ad avvolgere il float.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
border: 3px solid #1c87c9;
}
.box img {
float: left;
background: #ccc;
}
/* Remove this rule and the border collapses around nothing */
.box::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
</div>
</body>
</html>Errori comuni
clearvede solo i float precedenti. Sposta un elemento sotto i float che appaiono prima di esso nel sorgente, non dopo. Organizza il markup di conseguenza.- Applicare clear all'elemento flottante stesso raramente è utile. Per contenere i float, applica clear a un elemento fratello dopo di essi (il
::afterdel clearfix), non ai float stessi. - Non ha effetto in Flexbox o Grid. All'interno di un contenitore flex o grid,
floatviene ignorato, quindiclearnon ha nulla su cui agire. Per il nuovo codice, preferisci Flexbox o Grid ai layout basati sui float.
Valori
| Valore | Descrizione |
|---|---|
| none | Consente elementi flottanti su entrambi i lati. È il valore predefinito di questa proprietà. |
| left | Indica che gli elementi flottanti non sono consentiti sul lato sinistro. |
| right | Indica che gli elementi flottanti non sono consentiti sul lato destro. |
| both | Indica che gli elementi flottanti non sono consentiti su nessuno dei due lati. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |