Spiegazione dei CSS Float in 5 domande

I CSS "Floats" (elementi fluttuanti) sono semplici da usare, ma una volta usati, l'effetto che ha sugli elementi attorno ad esso a volte diventa imprevedibile. Se ti sei mai imbattuto nei problemi di svanire elementi vicini o galleggianti che colpiscono come un pollice dolente, non ti preoccupare più.

Questo post copre cinque domande fondamentali che ti aiuteranno a diventare un esperto di elementi fluttuanti.

1. Quali elementi non galleggiano?
2. Cosa succede a un elemento quando galleggia?
3. Cosa succede ai fratelli di "Floats"?
4. Cosa succede a un genitore di un "Float"?
5. Come si deseleziona "Floats"?

Per i lettori che aggiungono l'approccio TL alla vita, c'è un riassunto vicino alla fine del post.

1. Quali elementi non galleggiano?

Un assoluto o elemento posizionato fisso non galleggia. Quindi la prossima volta che incontri un float che non funziona, controlla se è in position: absolute o position: fixed e applicare le modifiche di conseguenza.

2. Cosa succede a un elemento quando galleggia?

Quando un elemento viene taggato "float", viene eseguito fondamentalmente fino a sinistra o destra colpisce il muro del suo elemento contenitore. In alternativa, funzionerà fino a quando colpisce un altro elemento galleggiante che ha già colpito lo stesso muro. Continueranno ad accumularsi fianco a fianco finché lo spazio non si esaurirà, e quelli nuovi in ​​arrivo verranno spostati verso il basso.

Elementi galleggianti anche non andrà al di sopra degli elementi prima esso nel codice, qualcosa che devi considerare prima di codificare a “Galleggiante” dopo un elemento sul lato del quale vuoi farlo galleggiare.

Qui ci sono altre due cose che accadono ad un elemento fluttuante a seconda del tipo di elemento che viene mantenuto fluttuante:

(1) Un elemento in linea si trasformerà in un elemento a livello di blocco quando galleggiava.

Vi siete mai chiesti perché improvvisamente siete in grado di assegnare altezza e larghezza a un galleggiante campata? Questo perché tutti gli elementi quando floated otterranno il valore bloccare per il suo display attributo (inline-table otterrà tavolo) rendendoli elementi a livello di blocco.

(2) Un elemento di blocco di larghezza non specificato si restringerà per adattarsi al suo contenuto quando floated.

Di solito, quando non si specifica la larghezza a un elemento del blocco, la sua larghezza è il 100% predefinito. Ma quando galleggiava, non è più così; la scatola dell'elemento di blocco si restringerà fino a quando il suo contenuto rimarrà visibile.

3. Cosa succede ai fratelli di "Floats"?

Quando decidi di spostare un elemento tra un gruppo di elementi non ti preoccupare di come si comporterà, il suo comportamento sarà prevedibile e si sposterà a destra oa sinistra. Quello che dovresti davvero pensare è come i fratelli dopo che si stanno comportando.

"Galleggianti" hanno i fratelli più premurosi e obbedienti di tutto il mondo. Faranno tutto ciò che è in loro potere per accogliere un elemento fluttuante.

Il testo e elementi in linea semplicemente lascia il posto ai "Floats" e circonderà il "Float" quando è in posizione.

Il elementi di blocco andrà un ulteriore passo avanti e lo farà avvolgersi attorno a un "Float" generosamente, anche se significa buttare fuori i propri elementi figli per fare spazio al "Float".

Diamo un'occhiata a questo in un esperimento. Sotto c'è una scatola blu e dopo è una scatola rossa delle stesse dimensioni con alcuni elementi figlio.

Ora, fluttuiamo nella scatola blu e vediamo cosa succede alla scatola rossa e ai suoi figli.

Tutto andrà bene quando la scatola rossa smette di abbracciare la scatola blu e per quello che puoi usare overflow: hidden.

Quando aggiungi overflow: hidden a un elemento che ha avvolto un oggetto mobile, smetterà di farlo. Vedi sotto come si comporta il riquadro rosso overflow: hidden.

4. Cosa succede a un genitore di un "Float"?

I genitori non si preoccupano molto dei loro bambini "Float", tranne che non dovrebbero uscire dai loro confini di sinistra o di destra.

Tipicamente un elemento di blocco di altezza non specificata aumenta la sua altezza per accogliere i suoi elementi figli, ma non è il caso dei bambini "Float". Se una dimensione di "Float" aumenta, il suo genitore non aumenterà di conseguenza la sua altezza. Questo di nuovo può essere risolto usando overflow: hidden nel genitore.

5. Come cancellare "Floats"?

Ho già menzionato l'uso overflow: hidden per rendere un genitore in grado di ospitare un bambino fluttuante mentre crea lo spazio giusto per altri elementi dopo il "Float" e per impedire ai fratelli di eseguire il wrapping "Floats.

Ed è così che fai vivere un elemento vicino a un "Float" senza compromessi.

C'è un altro metodo in cui gli elementi non saranno nemmeno lontanamente vicini ai loro fratelli "Float". Usando il chiaro attributo puoi liberare un elemento dall'essere vicino a un "Float".

chiaro: a sinistra; chiaro: giusto; chiaro: entrambi; 

sinistra valore cancella tutti i "float" a sinistra dell'elemento e viceversa per destra, e su entrambi i lati per tutti e due. Questo chiaro l'attributo può essere usato su un fratello, su un div vuoto o su uno pseudo elemento come da tuo comodo.

Sommario

1. Gli elementi assoluto / fisso non galleggiano.
2. Un "Float" non va sopra l'elemento prima nel codice.
3. Se non c'è abbastanza spazio nel contenitore, un "Float" verrà spostato verso il basso.
4. Tutti i "Floats" sono trasformati in elementi a livello di blocco.
5. Se la larghezza non è specificata su "Float", si ridurrà per adattarsi al contenuto.
6. I fratelli successivi di un "Float" li circonderanno (in linea e testo) o li avvolgeranno (blocchi).
7. Per fermare un elemento dal wrapping di "Float", usa overflow: hidden.
8. I genitori di un "Float" non aumenterebbero la sua altezza per adattarsi al galleggiante.
9. Per fare in modo che un genitore aumenti la sua altezza come per "Float", usa overflow: hidden (o creare un fratello vuoto con chiaro dopo ciò)
10. Per evitare che un elemento sia vicino a qualsiasi "Float" usa il chiaro attributo.