I galleggianti CSS hanno spiegato cavalcando una scala mobile

Se sei mai saltato su una scala mobile, allora puoi capire rapidamente i galleggianti.

Il tuo

è quasi perfetto. Decidi di introdurre alcuni float per correggere la relazione tra alcuni elementi.

La prossima cosa che sai, i tuoi elementi appena fluttuati saltano fuori dall'ordine scelto con cura e si attaccano al lato del div come un magnete. Mi viene in mente la frase "comportamento involontario".

Personalmente ho passato ore a cercare di comprendere appieno i galleggianti. Leggevo un articolo e dicevo: "Oh, questo ha senso!" Quindi vorrei tornare al mio codice, provarlo e ... fallire. Torna al tavolo da disegno.

Farò del mio meglio per risparmiarti questo destino.

I galleggianti creano flussi alternativi. Questa è la parte più difficile da capire. E una volta introdotti, è necessario scrivere il codice in modo che conti fino a tre flussi: normale, sinistro e destro. Questo è un insieme completamente nuovo di regole, al contrario di manipolare la larghezza degli elementi o il loro posizionamento.

In realtà, i galleggianti sono abbastanza simili alla dinamica di salire su una scala mobile e mostrerò come possono essere usati insieme alla proprietà chiara per creare relazioni cristalline all'interno dei div. In questo modo, la prossima volta che tenterai di utilizzare i float nel tuo codice, non incontrerai sorprese.

Devo rispettare la corsia del passaggio

Il flusso predefinito di elementi è un po 'come l'immagine sopra. Qualcuno è in piedi in mezzo con la mano sulla ringhiera. Sta guidando l'intera scala mobile. Nessuno può passarlo. Etichetta di scala mobile piuttosto scadente, davvero.

È in piedi dietro un gruppo di altre persone che stanno facendo la stessa cosa, quindi nessuno può passarle neanche. Non esiste un concetto di corsia o decenza umana di base.

Questo è lo scenario in cui non si utilizzano affatto float.

Bene, adesso stiamo parlando! Le persone che mostrano un certo livello di consapevolezza. Adoro vederlo.

Abbiamo una corsia formata a sinistra e un'altra corsia formata a destra. Altre persone possono spostarsi facilmente tra le due persone che stanno ferme e salire più rapidamente la scala mobile, se lo desiderano. Nessuno sta bloccando il flusso stando in mezzo.

Questo è lo scenario in cui usi i float nel tuo div. C'è un flusso sinistro e un flusso destro, e gli elementi che non sono flottanti possono riempire facilmente lo spazio che non è occupato dagli elementi fluttuanti.

Galleggianti: sinistra e destra

L'uso dei float può introdurre fino a due nuovi flussi: sinistro e destro.

Ciò consente al normale flusso di elementi, quelli senza valore float, di riempire gli spazi attorno a questi elementi.

I float consentono di creare queste nuove relazioni tra i flussi.

Se avessi una fila di persone in piedi nel mezzo dell'ascensore, avresti opzioni limitate per le nuove strutture. Ma quando hai una colonna sinistra e destra, all'improvviso puoi specificare che alcune persone stanno sulla destra, altre rimangono a sinistra e un altro gruppo può colmare le lacune.

Ciò ti consente di creare un codice più leggibile e comprensibile, poiché la proprietà float fornisce anche un'indicazione della relazione di un elemento con gli elementi circostanti.

La proprietà chiara

C'è ancora una ruga che non abbiamo ancora discusso: la proprietà chiara. "Clear" consente agli elementi di specificare dove devono allinearsi rispetto agli elementi fluttuati.

Nella prima immagine della sezione "Galleggianti", i due cavalieri della scala mobile erano cortesemente in piedi su ciascun lato della scala mobile. Ciò consente agli altri di passarli e muoversi liberamente come desiderano.

Diciamo che invece di avere un elemento a sinistra flottato e un elemento a destra fluttuato, avevamo invece 3 elementi a sinistra fluttuati e 1 a destra. I tre elementi a sinistra fluttuanti si accumulerebbero in una riga a sinistra se dessimo loro anche la proprietà "clear: left". Ma se si allineassero orizzontalmente con l'elemento flottante a destra, potrebbe rendere molto difficile o addirittura impossibile il passaggio del normale flusso di elementi:

"Clear: left" dice a ogni persona che fluttua a sinistra che dovrebbero allinearsi dietro il primo elemento che viene spostato a sinistra. A seconda delle dimensioni delle due persone in basso, potrebbe essere difficile per qualsiasi elemento normale passare attraverso e occupare lo spazio in alto a destra. Quindi, anche le buone pratiche di scala mobile possono ancora portare a blocchi.

Uno degli usi più frequenti della proprietà clear è "clear: both". Ciò consente di ripristinare il flusso degli elementi, anziché continuare a mantenere un flusso destro, sinistro e normale. È un po 'come quel tipo sulla scala mobile che occupa tutto lo spazio perché ha portato la sua valigia.

Con "clear: both", non importa dove quel ragazzo si trovi in ​​orientamento con la sua valigia. Non importa chi è in piedi a sinistra o a destra sopra di lui. Sta ancora bloccando l'intera scala mobile. Le persone che vanno avanti dopo di lui dovranno iniziare un nuovo flusso di elementi, che potrebbe includere uno dei tre flussi: sinistro, destro o normale.

È sfuggito al sistema a tre flussi e ha ripristinato le regole. Male per le persone che vogliono salire sulla scala mobile? Sicuro. Ma va bene se vuoi impedire a qualcuno di passare.

Notate come questo sia diverso dall'unico gentiluomo all'inizio che si trovava nel mezzo della scala mobile, dietro una fila di persone che stavano facendo lo stesso. Quello era un sistema a flusso unico. "Clear: both" riconosce che possono esserci fino a tre flussi e blocca il passaggio di qualsiasi elemento che segue.

Se ti è piaciuto questo post, potresti anche goderti le mie altre spiegazioni su argomenti CSS e JavaScript impegnativi, come posizionamento, Model-View-Controller e callback.

E se pensi che questo possa aiutare altre persone nella tua stessa posizione, dagli un "cuore"!

Questo post è originariamente apparso sul blog CodeAnalogies.