Cos'è un ClearFix?

La cancellazione dei galleggianti in un browser è importante per molti sviluppatori. Un ClearFix è una proprietà CSS (più comunemente nota come hack) che viene utilizzata per cancellare o riparare gli elementi figlio di una classe senza richiedere markup aggiuntivi. Cancella i bug che si verificano quando due elementi galleggianti si accumulano uno accanto all'altro.

L'uso della proprietà ClearFix può regolare automaticamente l'elemento genitore in base all'elemento figlio e risolvere i problemi in un codice HTML attraverso alcuni attributi come "overflow"Ciò controlla le dimensioni degli elementi genitore e figlio senza richiedere markup aggiuntivi.

Uso della proprietà ClearFix

Comprendiamo l'uso di una proprietà ClearFix per sapere cosa fa all'output aggiungendo una proprietà CSS ClearFix in un frammento di codice HTML:

Senza proprietà ClearFix

Eseguiamo uno snippet di codice senza eseguire la proprietà ClearFix per comprendere il tipo di problemi che ClearFix è in grado di risolvere:

Crea una classe in HTML che inserisce un'immagine in un contenitore di div:

Testo…

Di seguito è riportato il codice CSS per HTML sopra:

Ciò genererà l'output in modo tale che la classe figlio che contenga l'immagine traboccherà al di fuori del contenitore. In situazioni come questa, la proprietà Clear Fix può essere utilizzata per cancellare o risolvere facilmente questo problema:

Con proprietà ClearFix

Per risolvere il problema, possiamo semplicemente aggiungere un overflow attributo con il valore uguale a auto che regolerà il contenitore genitore in base alla dimensione dell'elemento figlio:

Qui in questo frammento di codice, la classe principale è il contenitore e l'immagine viene inserita nella sua classe figlio:

Testo…

L'aggiunta di una proprietà ClearFix espanderà automaticamente l'elemento genitore (contenitore) in base alla dimensione dell'elemento figlio che è l'immagine inserita:

Ecco come funziona una proprietà ClearFix in HTML.

Conclusione

Una proprietà ClearFix viene utilizzata per regolare gli elementi figlio in HTML in base agli elementi principali con una semplice proprietà ClearFix senza richiedere markup aggiuntivi. L'uso di CSS ClearFix aumenta o diminuisce le dimensioni degli elementi dei genitori per regolarli in base alle dimensioni degli elementi figlio.