CSS: come utilizzare la classe Clearfix
Il più delle volte può capitare che un’immagine oppure del testo presente all’interno del tag div, sbordi fuori dal suo contenitore. È l’effetto che potete vedere nella parte sinistra dell’immagine qui sotto. Insomma attraverso clearfix possiamo gestire correttamente gli elementi contenitori che contengono un elemento in float e per fare questo utilizzeremo una piccola regola CSS.
Quindi come si può risolvere il problema?
Bhe semplicemente aggiungendo all’interno del file.css del vostro tema la classe denominata clearfix. Per fare questo lavoro esistono varie strade e possibilità, però sono tutte volte a ottenere lo stesso risultato. Cioè quello di andare ad “allungare” il contenitore per contenere interamente (in altezza) un elemento float.
Tutte queste strade o tecniche che utilizzano clearfix, si basano più o meno sullo stesso principio, cioè andare a creare un contenuto dinamico alla fine dalla pagina e renderlo “clear”, ovvero libero da ogni float.
Una delle soluzioni più semplici e dirette è quella che ho racchiuso nel codice qui sotto. Ovviamente non è la regola di base e non è neanche la strategia che dovete utilizzare come se fosse una regola divina. Sicuramente potete trovare altri modi e tecniche per utilizzare clearfix. Non perdiamo più il tempo e andiamo a vedere il codice.
Esempio utilizzo clearfix:
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}</pre>
<pre>
In poche parole, il risultato finale di questo codice lo potete vedere nell’immagine qui sopra nella parte destra.
Ecco questo è tutto per il momento, continuate a seguirci da vicino per altri trucchi e consigli sul CSS, ma anche per tante altre novità.
Come al solito, concludiamo il post con alcuni manuali utili per proseguire lo studio in modo migliore e più dettagliato:
- CSS3: Guida completa per lo sviluppatore (Internet e web design)
- HTML5 e CSS3: Guida completa
- CSS3
- HTML5 CSS3 JavaScript
Seguiteci anche su Facebook, Google Plus, Tumblr e Twitter, per restare sempre in contatto con noi e con le nostre guide.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.
