Cosa fa la seguente regola CSS:

.clear { clear: both; }

E perché dobbiamo usarlo?

Non spiegherò come funzionano i float qui (in dettaglio), poiché questa domanda si concentra generalmente sul perché usare clear: both;OR cosa fa clear: both;esattamente ...

Terrò questa risposta semplice e precisa e ti spiegherò graficamente perché clear: both;è necessario o cosa fa ...

Generalmente i designer fluttuano gli elementi, a sinistra oa destra, creando uno spazio vuoto sull'altro lato che consente ad altri elementi di occupare lo spazio rimanente.

Perché galleggiano elementi?

Gli elementi vengono spostati quando il progettista necessita di 2 elementi a livello di blocco affiancati. Ad esempio diciamo che vogliamo progettare un sito Web di base che abbia un layout come sotto ...

Esempio live dell'immagine demo.

Codice per la demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Nota: Potrebbe essere necessario aggiungere header, footer, aside, section(e altri elementi HTML5) come display: block;nel foglio di stile per esplicitamente menzionare che gli elementi sono elementi a livello di blocco.

Spiegazione:

Ho un layout di base, 1 intestazione, 1 barra laterale, 1 area di contenuto e 1 piè di pagina.

Nessun float per header, poi arriva il asidetag che userò per la barra laterale del mio sito Web, quindi galleggerò l'elemento a sinistra.

Nota: per impostazione predefinita, l'elemento a livello di blocco occupa la larghezza del documento al 100%, ma quando viene spostato a sinistra oa destra, verrà ridimensionato in base al contenuto che contiene.

1. Comportamento normale dell'elemento a livello di blocco
2. Comportamento fluttuato dell'elemento a livello di blocco

Quindi, come notate, il galleggiante a sinistra divlascia lo spazio alla sua destra inutilizzato, il che consentirà al divsuccessivo di spostarsi nello spazio rimanente.

1. divverranno visualizzati uno dopo l'altro se NON sono flottati
2. div si sposteranno uno accanto all'altro se galleggia a sinistra o a destra

Ok, ecco come si comportano gli elementi a livello di blocco quando vengono spostati a sinistra oa destra, quindi ora perché è clear: both;necessario e perché?

Quindi, se noti nella demo del layout - nel caso in cui te ne fossi dimenticato, eccolo qui ..

Sto usando una classe chiamata .cleare contiene una proprietà chiamata clearcon un valore di both. Quindi vediamo perché ne ha bisogno both.

Ho galleggiato asideed sectionelementi a sinistra, quindi supponiamo uno scenario, in cui abbiamo una piscina, dove headerè terra solida, asidee sectionfluttuano nella piscina e il piè di pagina è di nuovo terra solida, qualcosa del genere ..

Quindi l'acqua blu non ha idea di quale sia l'area degli elementi fluttuanti, possono essere più grandi della piscina o più piccoli, quindi ecco un problema comune che disturba il 90% dei principianti CSS: perché lo sfondo di un elemento contenitore non è allungato quando contiene elementi fluttuanti. È perché l'elemento contenitore è una PISCINA qui e la PISCINA non ha idea di quanti oggetti galleggiano o di quale sia la lunghezza o l'ampiezza degli elementi fluttuanti, quindi semplicemente non si allungherà.

1. Flusso normale del documento
2. Sezioni fluttuate a sinistra
3. Elementi flottanti deselezionati per allungare il colore di sfondo del contenitore

(Fare riferimento alla sezione ^[Clearfix] di questa risposta per un modo pulito per farlo. Sto usando un divesempio vuoto intenzionalmente a scopo di spiegazione)

Ho fornito 3 esempi sopra, 1 ° è il normale flusso di documenti in cui lo redsfondo verrà visualizzato come previsto poiché il contenitore non contiene oggetti fluttuanti.

Nel secondo esempio, quando l'oggetto viene spostato a sinistra, l'elemento contenitore (POOL) non conoscerà le dimensioni degli elementi fluttuanti e quindi non si allungherà all'altezza degli elementi fluttuati.

Dopo l'uso clear: both;, l'elemento contenitore verrà allungato fino alle dimensioni dell'elemento mobile.

Un altro motivo clear: both;utilizzato è quello di impedire all'elemento di spostarsi verso l'alto nello spazio rimanente.

Supponiamo che tu voglia 2 elementi affiancati e un altro elemento al di sotto di loro ... Quindi galleggerai 2 elementi a sinistra e vuoi l'altro sotto di loro.

1. divGalleggiante a sinistra con conseguente sectionspostamento nello spazio rimanente
2. Floated divcancellato in modo che il sectiontag venga visualizzato al di sotto della divs mobile

1o esempio

2 ° esempio

Ultimo ma non meno importante, il footertag verrà visualizzato dopo gli elementi fluttuanti poiché ho usato la clearclasse prima di dichiarare i miei footertag, il che assicura che tutti gli elementi fluttuati (sinistra / destra) siano cancellati fino a quel punto.

clearfix

Venendo a clearfix che è legato ai float. Come già specificato da @Elky , il modo in cui stiamo cancellando questi float non è un modo pulito per farlo poiché stiamo usando un divelemento vuoto per il quale non è previsto un divelemento. Quindi ecco che arriva il clearfix.

Pensalo come un elemento virtuale che creerà per te un elemento vuoto prima della fine dell'elemento genitore. Ciò cancella automaticamente l'elemento wrapper che contiene elementi fluttuanti. Questo elemento non esisterà letteralmente nel tuo DOM ma farà il lavoro.

Per cancellare automaticamente qualsiasi elemento wrapper con elementi fluttuanti, possiamo usare

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Nota lo :afterpseudo elemento usato da me per quello class. Ciò creerà un elemento virtuale per l'elemento wrapper appena prima che si chiuda da solo. Se guardiamo nella dom puoi vedere come appare nella struttura del documento.

Quindi, se si vede, si è resa dopo che il bambino fatto galleggiare divin cui abbiamo chiaro i carri, che non è altro che equivale ad avere un vuoto divelemento con clear: both;proprietà che stiamo usando anche per questo. Ora perché display: table;e non contentrientra in questo ambito di risposte, ma puoi saperne di più sullo pseudo elemento qui .

Nota che questo funzionerà anche in IE8 poiché IE8 supporta lo :afterpseudo .

Risposta originale:

La maggior parte degli sviluppatori fa fluttuare il loro contenuto a sinistra o a destra sulle loro pagine, probabilmente i div che tengono il logo, la barra laterale, i contenuti ecc., Questi div sono fluttuati a sinistra o a destra, lasciando inutilizzato il resto dello spazio e quindi se si posizionano altri contenitori, fluttua troppo nello spazio rimanente, quindi per evitare che clear: both;venga usato, cancella tutti gli elementi fluttuati a sinistra o a destra.

Dimostrazione:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Ora cosa succede se si desidera eseguire il rendering dell'altro div in basso div1, quindi lo si utilizzerà in clear: both;modo da assicurarsi di cancellare tutti i float, a sinistra oa destra

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

La clearproprietà indica che i lati sinistro, destro o entrambi di un elemento non possono essere adiacenti ad elementi mobili precedenti nello stesso contesto di formattazione del blocco. Gli elementi eliminati vengono spinti sotto gli elementi mobili corrispondenti. Esempi:

clear: none; L'elemento rimane adiacente agli elementi fluttuanti

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Elemento spinto in basso a sinistra elementi flottanti

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Elemento spinto in basso a destra elementi flottanti

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Elemento spinto sotto tutti gli elementi mobili

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear non influisce sui float al di fuori del contesto di formattazione del blocco corrente

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS fluttuante e chiaro

Fiddle campione

Basta provare a rimuovere la clear:bothproprietà dal divcon class samplee vedere come segue mobile divs.

La risposta del signor Alien è perfetta, ma comunque non consiglio di usarla <div class="clear"></div>perché è solo un trucco che rende sporco il tuo markup. Questo è inutile vuoto divin termini di cattiva struttura e semantico, questo rende anche il tuo codice non flessibile. In alcuni browser questo div provoca un'altezza aggiuntiva e devi aggiungere height: 0;quale ancora peggio. Ma i veri problemi iniziano quando si desidera aggiungere uno sfondo o un bordo attorno agli elementi mobili: collasserà semplicemente perché il Web è stato progettato male . Consiglio di avvolgere gli elementi fluttuati nel contenitore che ha la regola CSS clearfix . Anche questo è hack, ma bello, più flessibile da usare e leggibile per robot umani e SEO.

Quando vuoi che un elemento sia posizionato nella parte inferiore dell'altro elemento, usi questo codice nei CSS. È usato per i galleggianti.

Se si fluttua il contenuto, è possibile fluttuare a sinistra oa destra ... quindi in un layout comune potresti avere un nav di sinistra, un div di contenuto e un piè di pagina.

Per assicurarti che il piè di pagina rimanga al di sotto di entrambi questi float (se hai fluttuato a sinistra ea destra), metti il ​​piè di pagina come clear: both.

In questo modo rimarrà sotto entrambi i galleggianti.

(Se stai solo cancellando a sinistra, allora devi solo farlo clear: left;.)

Passa attraverso questo tutorial: