L'utilizzo 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 ' traboccare ” che controlla le dimensioni degli elementi padre 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 uno snippet di codice HTML:
Senza proprietà Clearfix
Eseguiamo uno snippet di codice senza eseguire la proprietà clearfix per capire il tipo di problemi che clearfix è in grado di risolvere:
Crea una classe in HTML che inserisce un'immagine in un contenitore div:
< div classe = 'chiara correzione' >
< fratello >< imm classe = 'immagine' src = 'immagine.png' qualunque cosa = 'Immagine' larghezza = '250' altezza = '180' >
Testo...
< / div >
Di seguito è riportato il codice CSS per l'HTML sopra:
.clearfix {
confine : 3px solido #2baa12 ;
imbottitura : 5px ;
}
.img {
galleggiante : Sinistra ;
}
>
Questo genererà l'output in modo tale che la classe figlia che contiene l'immagine fuoriesca dal contenitore. In situazioni come questa, la proprietà clear fix può essere utilizzata per eliminare o risolvere facilmente questo problema:
Con proprietà Clearfix
Per risolvere il problema, possiamo semplicemente aggiungere un file traboccare attributo con il valore uguale a auto che regolerà il contenitore padre in base alla dimensione dell'elemento figlio:
.clearfix {
confine : 3px solido #2baa12 ;
imbottitura : 5px ;
}
.clearfix {
traboccare : auto ;
}
.img {
galleggiante : Sinistra ;
}
>
Qui in questo frammento di codice, la classe genitore è il contenitore e l'immagine è inserita nella sua classe figlia:
< div classe = 'chiara correzione' >< fratello >< imm classe = 'immagine' src = 'immagine.png' qualunque cosa = 'Immagine' larghezza = '250' altezza = '180' >
Testo...
< / div >
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 padre con una semplice proprietà clearfix senza richiedere markup aggiuntivi. L'uso di CSS Clearfix aumenta o diminuisce le dimensioni degli elementi padre per adattarle in base alle dimensioni degli elementi figlio.