Che cosa fanno veramente i galleggianti in ogni caso? In che modo influenzano il modello di box degli elementi coinvolti? In che modo gli elementi flottati differiscono dagli elementi in linea? Quali sono le regole specifiche che regolano la posizione degli elementi flottanti? Come funziona la proprietà chiara e a cosa serve?
I galleggianti possono far inciampare anche gli sviluppatori esperti e capire il loro comportamento può davvero liberarti da molti dei problemi che devi affrontare con i CSS. Anche se pensi di sapere già tutto sui galleggianti, ci immergiamo abbastanza in profondità che potresti imparare qualcosa di nuovo!
Cos'è un galleggiante?
Alcuni elementi nel CSS sono elementi a livello di blocco, il che significa che iniziano automaticamente una nuova riga. Ad esempio, se crei due elementi di paragrafo a parola singola, questi non fluiranno l'uno nell'altro ma verranno visualizzati su righe separate. Altri elementi sono elementi in linea. Ciò significa che appaiono? In linea? con il contenuto precedente. Un esempio è un tag di ancoraggio, che può apparire all'interno di un altro elemento come un paragrafo senza causare ulteriori spazi bianchi o nuove righe.
Un modo per imbrogliare questo modello di layout è utilizzare i float, che consentono a un dato elemento di spostarsi su un lato della sua linea e far scorrere altri contenuti lungo il suo lato. Un elemento flottato a destra verrà spinto completamente a destra del suo contenitore e il flusso di contenuti scenderà sul lato sinistro e un elemento flottante a sinistra verrà spinto completamente verso sinistra con il contenuto che scorre lungo il lato destro.
L'esempio classico è quando si getta un'immagine con un paragrafo e si desidera che i due appaiano fianco a fianco anziché impilati. Per prima cosa creiamo entrambi gli elementi con un po 'di HTML:
Con questo codice in atto, la nostra immagine viene spostata sul lato destro della linea e il paragrafo può scorrere lungo il lato sinistro. Clicca qui o sull'immagine qui sotto per vedere e modificare un esempio dal vivo di questo codice in azione.
Una cosa interessante del comportamento di questa immagine ora che è fluttuante è che i nostri altri contenuti cercheranno effettivamente di avvolgerlo intorno dove possibile. Se ridimensioni il nostro contenitore o la finestra del browser, il testo si riflette semplicemente in modo che non tocchi mai l'immagine.
Come funziona la scatola
Le probabilità hai già capito questo comportamento in maniera decente. Tuttavia, al fine di maneggiare correttamente i float, è necessario capire in che modo questi due elementi interagiscono a livello più profondo. Ad esempio, come aggiungere margine extra tra il paragrafo e l'immagine? Potresti pensare che questo funzioni:
Tuttavia, questo non metterà nemmeno un singolo pixel di spazio aggiuntivo tra l'immagine e il paragrafo. Invece, dobbiamo applicare il nostro margine all'immagine:
La domanda che dovresti porci è, perché? Perché non aumentare il margine del paragrafo aumentare lo spazio tra l'immagine e il paragrafo? La ragione è che non riusciamo ad afferrare il modello di box in quanto riguarda quel paragrafo.
Se hai dubbi su come funziona il tuo layout su un livello base, prova ad applicare un bordo o due per vedere cosa sta succedendo. Se usiamo questa tecnica sul paragrafo, il risultato potrebbe sorprendervi.
Come puoi vedere, l'immagine è effettivamente all'interno della casella del paragrafo! Questo risolve il nostro enigma del margine. Qualsiasi margine aggiunto al paragrafo viene applicato a destra dell'immagine, questo è il motivo per cui non aumenta lo spazio tra l'immagine e il paragrafo.
Se volessimo modificare questo comportamento in modo che il paragrafo non avvolgesse l'immagine, potremmo spostare il paragrafo a sinistra e assegnargli una larghezza specificata (senza esprimere la larghezza, il paragrafo è largo al 100% e non si adatta accanto all'immagine).
Regole folli del galleggiante
Ora sappiamo cos'è un float e come influenza le scatole degli elementi coinvolti. Passiamo ad un'altra informazione che probabilmente molti sviluppatori non capiscono minimamente: le regole che governano la posizione di un elemento fluttuante.
È spesso il caso che gli sviluppatori utilizzino i float per governare il posizionamento degli elementi della lista, magari in una galleria di immagini o in un elenco di funzionalità. Vediamo come funziona creando una semplice lista piena di immagini.
Per i principianti, questo esempio è diverso nel fatto che le immagini sono predefinite in uno stato di allineamento verticale lungo i loro bordi inferiori. Questo li fa sembrare molto diversi dal nostro esempio precedente, ma possiamo risolvere il problema con una singola riga di CSS.
Ora stiamo iniziando a somigliare molto all'esempio flottante, solo la visualizzazione degli elementi della lista in linea ha un ordine di impilamento molto più prevedibile. Quando non c'è spazio sull'asse x per l'oggetto successivo, ricomincia sulla diapositiva a sinistra nella riga successiva.
Quindi, perché la nostra galleria di immagini fluttuante non funziona così? Quale strano governo governa gli oggetti fluttuanti?
Traduzione richiesta
Si scopre che la specifica CSS delinea una lista di nove regole che governano il comportamento dei float. Il problema con questa lista è che è stato scritto in modo che solo gli avvocati e altre persone noiose possano capirlo. Ecco una citazione diretta da una delle regole:
? Se la casella corrente è a virgola mobile, e ci sono delle caselle a virgola mobile generate da elementi precedenti nel documento sorgente, allora per ciascuna di tali caselle precedenti, il bordo esterno sinistro della casella corrente deve trovarsi a destra del il bordo esterno destro della casella precedente o la parte superiore deve essere inferiore alla parte inferiore della casella precedente. Regole analoghe valgono per le scatole che galleggiano a destra.Forse la tua comprensione della lettura è più alta della mia, ma questa e le altre regole della lista mi hanno fatto girare la testa. Tutto questo parlare dell'estremità esterna sinistra a destra del bordo esterno destro è in realtà roba di base vestita per sembrare complicata. Per semplificare le cose, ecco le nove regole di Josh Johnson per il comportamento del galleggiante, tradotte in inglese per la vostra comodità.
- Gli elementi flottati sono spinti sul bordo dei loro contenitori, non oltre.
- Qualsiasi elemento fluttuato apparirà accanto o sotto un elemento float precedente. Se gli elementi sono flottanti a sinistra, il secondo elemento apparirà a destra del primo. Se sono a destra, il secondo elemento apparirà a sinistra del primo.
- Una casella a virgola mobile non può essere più a destra di una scatola a virgola mobile.
- Gli elementi fluttuati non possono andare più in alto del bordo superiore del loro contenitore (questo diventa più complicato quando sono coinvolti i margini di compressione, vedi regola originale).
- Un elemento fluttuato non può essere più alto di un livello di blocco precedente o di un elemento flottato.
- Un elemento fluttuato non può essere superiore a una riga precedente di elementi in linea.
- Un elemento flottato accanto a un altro elemento flottato non può sporgere oltre il bordo del suo contenitore.
- Una scatola galleggiante deve essere posizionata il più in alto possibile. (Nessuna traduzione necessaria)
- Una casella fluttuante a sinistra deve essere posizionata il più a sinistra possibile, una casella flottante a destra il più a destra possibile. Si preferisce una posizione più alta rispetto a una che è più a sinistra / a destra. (Nessuna traduzione necessaria)
Qui possiamo vedere che molti di questi sono più o meno di buon senso, ma devono essere esplicitamente indicati in modo che ogni persona e browser si trovi sulla stessa pagina. In sostanza, l'essenza della situazione è che gli elementi fluttuati vanno direttamente al limite specificato (a sinistra oa destra), ma non oltre. A meno che non ci sia un altro elemento fluttuante prima di esso, nel qual caso si avvicina a quello.
La vera sorpresa che ci ha confuso prima arriva nelle regole alla fine, il quale afferma che gli elementi flottanti cercano di rimanere il più alti possibile e che questa regola di posizionamento verticale ha la precedenza sulla regola orizzontale sinistra / destra che spinge un oggetto verso un bordo .
Nel nostro esempio precedente, l'immagine numero due ha allungato l'altezza della linea in modo che dopo l'immagine numero tre, ci fosse ancora uno spazio verticale in cui inserire il numero quattro dell'immagine. Anche tenendo presenti queste regole, il pattern non è sempre facile da prevedere.
Tieni presente che quando hai un elemento flottato, i successivi elementi flottanti dietro di esso occuperanno almeno la stessa quantità di spazio verticale o più prima di rompere la linea e andare più in basso nel flusso.
Ordine di galleggiamento
Un'ultima nota riguardante le regole che abbiamo esposto qui. La seconda regola ha alcune implicazioni interessanti per l'ordine degli oggetti che sono floatati. Diciamo che abbiamo di nuovo una lista di immagini numerate da uno a sei, in questo modo:
Ciò che questo codice fa è dire al browser che la parte superiore della seconda voce dell'elenco deve trovarsi sotto la parte inferiore di tutti gli oggetti a sinistra prima di essa (in questo caso, la prima voce dell'elenco). Se avessimo messo tutti questi elementi a destra, avremmo dovuto usarli ? chiaro: giusto? anziché.
Si noti che dopo questo, il resto degli oggetti flottanti mantengono il loro corso. Questo perché sono ancora impostati per andare a sinistra, la proprietà chiara non lo cancella in qualche modo. Ciò significa che il nostro problema con il paragrafo non è risolto eliminando uno degli elementi dell'elenco.
Invece, ciò che deve accadere è che l'elemento paragrafo, che è un elemento a livello di blocco che non è stato flottato, deve essere cancellato. Questo farà in modo che appaia sotto gli elementi flottati piuttosto che accanto a loro.
Abbiamo tecnicamente solo bisogno di una sinistra chiara qui, ma quando uno sviluppatore vuole essere sicuro di cancellare tutti i float, è prassi comune vedere tutti e due valore usato. Questo cambiamento ha risolto bene il nostro problema!
Float Quirks e Clear Fixes
C'è un'azione particolare che si verifica quando un dato elemento contiene solo elementi flottati: l'altezza dell'elemento genitore collassa. Per illustrare questo, diciamo che volevamo mettere un colore di sfondo sulla lista non ordinata che stiamo usando in tutti i nostri esempi. Se gli elementi nell'elenco non sono floatati, è sufficiente applicare il colore allo sfondo usando i CSS.
Come puoi vedere nell'esempio seguente, la casella che definisce l'elenco non ordinato è diventata grigia e gli elementi della lista all'interno sono impilati uno sopra l'altro.
Tuttavia, il secondo che spostiamo tali voci di elenco, che UL contiene solo elementi flottati, e quindi la sua altezza collassa, lasciando uno sviluppatore newbie chiedendo cosa diavolo è successo al suo colore di sfondo.
Esistono diversi modi per risolvere questo problema. La soluzione più semplice e diretta consiste semplicemente nell'applicare un'altezza esplicita all'elemento genitore, che è la lista non ordinata.
Come puoi vedere, questo ci ha davvero restituito il nostro background. Tuttavia, raramente questa è la strada da seguire semplicemente perché è più conveniente a lungo termine se l'altezza viene calcolata automaticamente in base al contenuto. Se aggiungiamo altre tre righe di immagini alla nostra lista ora, quell'altezza non sarà adeguata.
Clearfix To The Rescue
Questo è dove il termine? Correzione chiara ,? anche scritto? clearfix ,? entra in gioco. Clearfix risolve questo problema di altezza collassante tradizionalmente attraverso l'uso di chiaro proprietà.
Quello che gli sviluppatori erano soliti è creare un elemento vuoto (spesso un div) nel loro HTML allo stesso livello degli oggetti flottati, quindi applicare una classe di? Clearfix? a quel contenitore vuoto Tornando in CSS, si aggiungerebbe quindi i float alla clearfix? proprietà.
Questo risolve immediatamente il problema dell'altezza compressa:
Dato ciò che abbiamo già imparato, sappiamo esattamente perché questo trucco ha risolto il nostro problema. Il motivo per cui l'altezza era crollata è dovuto al fatto che il genitore conteneva solo bambini fluttuanti. Ora ha un figlio, anche se vuoto, che non è flottato, quindi l'altezza automatica funziona come previsto.
Il problema con questo metodo è che a nessuno è piaciuto quell'elemento extra brutto nell'HTML. Semplicemente non era semantico, il che significava che non stava aiutando a comunicare la chiara gerarchia della pagina.
La nuova correzione di fantasia per questo problema è di sfruttare il straripamento proprietà, che governa la funzionalità del contenuto che si estende oltre i limiti della sua casella di contenimento. Si scopre che se si imposta overflow su nascosto o auto sull'elemento padre, corregge il crollo dell'altezza!
Questa è sicuramente la soluzione più breve ed elegante per risolvere il problema dell'altezza collassante e dovrebbe essere il tuo approccio alla strategia. Detto questo, ci saranno casi in cui si desidera impostare l'overflow di un elemento visibilecosa dovresti fare allora?
La risposta è usare Micro Clearfix Hack di Nick Gallagher, che usa alcuni genius CSS per risolvere questo problema. Innanzitutto, utilizza: before e: after per aggiungere un contenuto che possiamo usare per creare qualcosa nel genitore che non è floatato. Tuttavia, non vuoi veramente alcun contenuto qui, quindi lo lasciamo vuoto ma impostiamo il display sulla tabella per creare una cella anonima (vuota e non occupa spazio) e infine usare il nostro vecchio amico chiaro. Questo crea l'elemento invisibile a livello di blocco di cui abbiamo bisogno per correggere il collasso di altezza senza markup HTML extra. Le versioni precedenti di IE richiedono la propria correzione, quindi anche questa viene generata.
Conclusione
In questo articolo, siamo andati oltre a tonnellata di grandi informazioni, sia di base che complicate. Abbiamo iniziato con una discussione su come sono i float e come funzionano su un livello base, quindi abbiamo proceduto a come impostare un elemento su float influenza le caselle confinanti degli elementi coinvolti in modo da poter capire correttamente come far funzionare i margini come tu li vuoi
Successivamente, ci siamo spostati sulle regole base che governano la posizione di un elemento flottato e siamo arrivati ad alcune interessanti conclusioni su come saranno posizionati elementi fluttuanti di altezze variabili e su come gli oggetti allineati correttamente appaiono in ordine inverso.
Infine, abbiamo chiaramente illustrato l'intera storia di come un genitore che contiene solo bambini fluttuanti avrà un'altezza compressa e come è possibile risolverlo in base al proprio scenario particolare.
Se i galleggianti fossero qualcosa che ti ha confuso prima di leggere questo articolo, unisciti al club. Ci confondono tutti all'inizio. Speriamo che tu abbia una conoscenza eccezionale di come funzionano i float e di come puoi usarli per ottenere qualsiasi layout tu voglia. Lascia un commento qui sotto e facci sapere se hai trovato utile questa informazione.