Layout CSS - clear e clearfix

Attributo clear

clear L'attributo specifica quali elementi possono fluttuare accanto all'elemento eliminato

clear L'attributo può essere impostato su uno dei seguenti valori:

  • none - è permesso che ci siano elementi fluttuanti su entrambi i lati. Valore predefinito
  • left - non è permesso che ci siano elementi fluttuanti a sinistra
  • right - non è permesso che ci siano elementi fluttuanti a destra
  • both - non è permesso che ci siano elementi fluttuanti a sinistra o a destra
  • inherit - l'elemento eredita il valore di clear del suo padre

usare clear L'uso più comune dell'attributo è su elementi che utilizzano float

Esempio che elimina il float a sinistra. Significa che non è permesso

Esempio

div {
  clear: left;
}

Prova da solo

Se un elemento è più alto dell'elemento che lo contiene e è fluttuante,

Poi possiamo aggiungere overflow: auto; all'elemento contenitore per risolvere questo problema: }}

Esempio

.clearfix {
  overflow: auto;
}

Prova da solo

Se puoi controllare i margini esterni e interni (altrimenti potresti vedere le barre di scorrimento), overflow: auto clearfix funzionerà bene. Ma la nuova tecnologia moderna di clearfix è più sicura, il seguente codice viene applicato su molti siti:

Esempio

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Prova da solo

Imparerai questo in un capitolo successivo ::after Elementi pseudo