Galleggiante - Trucchi CSS

La floatproprietà in CSS viene utilizzata per il posizionamento e il layout nelle pagine web.

.module ( float: left; )

Valori

• none: l'elemento non galleggia. Questo è il valore iniziale.
• left: fa fluttuare l'elemento a sinistra del suo contenitore.
• right: fa fluttuare l'elemento a destra del suo contenitore.
• inherit: l'elemento eredita la direzione float del suo genitore.

Nota: un elemento flottato viene automaticamente display: block;

Cosa significa galleggiante?

Per capire lo scopo e l'origine di float, possiamo cercare di stampare il design. In un layout di stampa, le immagini possono essere impostate nella pagina in modo tale che il testo le avvolga secondo necessità. Questo è comunemente e appropriatamente chiamato "ritorno a capo". Ecco un esempio di ciò.

Nei programmi di impaginazione, è possibile dire alle caselle che contengono il testo di rispettare il ritorno a capo o di ignorarlo. Ignorare il ritorno a capo del testo consentirà alle parole di scorrere direttamente sull'immagine come se non fossero nemmeno lì. Questa è la differenza tra quell'immagine che fa parte del flusso della pagina (o meno). Il web design è molto simile.

Nel web design, gli elementi della pagina floata cui è applicata la proprietà CSS sono proprio come le immagini nel layout di stampa in cui il testo scorre intorno ad essi. Gli elementi flottanti rimangono una parte del flusso della pagina web. Questo è nettamente diverso dagli elementi della pagina che utilizzano il posizionamento assoluto. Gli elementi della pagina posizionati in modo assoluto vengono rimossi dal flusso della pagina web, come quando è stato detto alla casella di testo nel layout di stampa di ignorare il ritorno a capo della pagina. Gli elementi della pagina posizionati in modo assoluto non influenzeranno la posizione di altri elementi e altri elementi non li influenzeranno, indipendentemente dal fatto che si tocchino o meno.

Demo

Questa demo mostra un articolo con due immagini: una impostata su float: lefte una impostata su float: right. Premere il pulsante "toggle float" per attivare e disattivare i galleggianti.

Vedi l'esempio di Pen Float di CSS-Tricks (@ css-tricks) su CodePen.

Galleggia per layout

A parte il semplice esempio di avvolgere il testo attorno alle immagini, i float possono essere utilizzati per creare interi layout web .

I galleggianti sono utili anche per il layout in istanze più piccole. Prendiamo ad esempio questa piccola area di una pagina web. Se usiamo floatper la nostra immagine avatar, quando l'immagine cambia dimensione, il testo nella casella si ridurrà per adattarlo:

Lo stesso layout potrebbe essere realizzato utilizzando il posizionamento relativo sul contenitore e il posizionamento assoluto anche sull'avatar. Ma, quando è fatto in questo modo, il testo non sarà influenzato dall'avatar e non sarà in grado di scorrere nuovamente su un cambio di dimensione.

Demo

Questa demo mostra un avatar con float: leftapplicato. Premi il pulsante "Cambia dimensione immagine" per vedere una versione più ampia dell'immagine avatar. Notare che il testo scorre per adattarsi all'immagine invece di scorrere sull'immagine.

Guarda la demo Pen Float di CSS-Tricks (@ css-tricks) su CodePen.

Cancellazione del galleggiante

La proprietà sorella di Float è clear. Un elemento che ha la clearproprietà impostata su di esso non si muoverà in alto adiacente al galleggiante come il galleggiante desidera, ma si sposterà verso il basso oltre il galleggiante. Ancora una volta un'illustrazione è più utile delle parole:

Nell'esempio precedente, la barra laterale viene spostata a destra ed è più corta dell'area del contenuto principale. Il piè di pagina quindi è necessario per saltare in quello spazio disponibile come richiesto dal float. Per risolvere questo problema, è possibile cancellare il piè di pagina per assicurarsi che rimanga sotto entrambe le colonne flottanti.

#footer ( clear: both; )

Anche Clear ha quattro valori validi. Il valore bothè più comunemente usato, che cancella i float provenienti da entrambe le direzioni. I valori lefte rightpossono essere utilizzati per cancellare il float solo da una direzione rispettivamente. Il valore iniziale è none, che in genere non è necessario a meno che non venga utilizzato per rimuovere esplicitamente un clearvalore che è stato impostato. Il valore inheritfa in modo che l'elemento erediti il clearvalore del suo genitore . Stranamente, Internet Explorer non supportava questo valore fino a IE8.

La cancellazione solo del lefto rightfloat, sebbene meno comunemente vista in natura, ha sicuramente i suoi usi.

Il grande crollo

Una delle cose più sconcertanti del lavoro con i float è come possono influenzare l'elemento che li contiene (il loro elemento "genitore"). Se un elemento genitore non contiene altro che elementi con virgola mobile, la sua altezza non si riduce a nulla. Questo non è sempre ovvio se il genitore non contiene alcuno sfondo visivamente evidente, ma è importante esserne consapevoli.

Per quanto controintuitivo possa sembrare il collasso, l'alternativa è peggiore. Considera questo scenario:

Se l'elemento blocco in alto si dovesse espandere automaticamente per accogliere l'elemento flottato, avremmo un'interruzione di spaziatura innaturale nel flusso di testo tra i paragrafi, senza alcun modo pratico per risolverlo. Se così fosse, noi designer ci lamenteremmo molto più duramente di questo comportamento che del collasso.

Il collasso deve quasi sempre essere affrontato per evitare strani layout e problemi tra browser. Lo ripariamo cancellando il galleggiante dopo gli elementi flottati nel contenitore ma prima della chiusura del contenitore.

Tecniche per la cancellazione dei galleggianti

Se ti trovi in ​​una situazione in cui sai sempre quale sarà l'elemento successivo, puoi applicare il clear: both;valore a quell'elemento e occuparti della tua attività. Questo è l'ideale in quanto non richiede hack fantasiosi e nessun elemento aggiuntivo che lo rende perfettamente semantico. Ovviamente le cose in genere non funzionano in questo modo e abbiamo bisogno di avere più strumenti di cancellazione del float nella nostra cassetta degli attrezzi.

• Il metodo div vuoto è, letteralmente, un div vuoto. . A volte vedrai un
elemento o qualche altro elemento casuale utilizzato, ma div è il più comune perché non ha uno stile predefinito del browser, non ha alcuna funzione speciale ed è improbabile che abbia uno stile generico con CSS. Questo metodo è disprezzato dai puristi semantici poiché non ha alcun significato contestuale alla pagina ed è presente solo per la presentazione. Ovviamente, in senso stretto, hanno ragione. Ma porta a termine il lavoro e non fa male a nessuno.
• Il metodo Overflow si basa sull'impostazione della overflowproprietà CSS su un elemento genitore. Se questa proprietà è impostata su autoo hiddensull'elemento genitore, il genitore si espanderà per contenere i float, cancellandolo efficacemente per gli elementi successivi. Questo metodo può essere meravigliosamente semantico in quanto potrebbe non richiedere elementi aggiuntivi. Tuttavia, se ti ritrovi ad aggiungere un nuovo divsolo per applicarlo, è altrettanto antisemantico del divmetodo vuoto e meno adattabile. Tieni inoltre presente che la proprietà overflow non è specifica per la cancellazione dei float. Fare attenzione a non nascondere il contenuto o attivare barre di scorrimento indesiderate.
• Il metodo Easy Clearing (altrimenti noto come "clearfix") utilizza uno pseudo selettore CSS intelligente ( :after) per cancellare i float. Invece di impostare l'overflow sul genitore, applichi una classe aggiuntiva come "clearfix" ad esso. Quindi applica questo CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Questo applicherà un po 'di contenuto, nascosto alla vista, dopo l'elemento genitore che cancella il float. Questa non è esattamente l'intera storia, poiché è necessario utilizzare codice aggiuntivo per adattarsi ai browser meno recenti. Nota: vedi anche questo snippet che tiene traccia degli ultimi e più importanti in clearfix, incluso il più recente "micro clearfix".

Diversi scenari richiedono diversi metodi di cancellazione del float. Prendiamo ad esempio una griglia di blocchi, ciascuno di diverso tipo.

Per connettere meglio visivamente i blocchi simili, vogliamo iniziare una nuova riga a nostro piacimento, in questo caso quando il colore cambia. Potremmo usare il metodo di overflow o di facile cancellazione se ciascuno dei gruppi di colori avesse un elemento genitore. Oppure usiamo il metodo div vuoto tra ogni gruppo. Tre div wrapping che non esistevano in precedenza o tre dopo div che non esistevano in precedenza. Ti lascio decidere quale è meglio.

Problemi con i galleggianti

I galleggianti spesso vengono picchiati per essere fragili. La maggior parte di questa fragilità proveniva da bug in IE6 e IE7. Mentre quei browser svaniscono nel passato, questi bug stanno svanendo insieme a loro. Ma vale comunque la pena comprenderli se è necessario eseguire il debug di un "OldIE".

• Il pushdown è un sintomo di un elemento all'interno di un elemento flottante più largo del flottante stesso (tipicamente un'immagine). La maggior parte dei browser renderizza l'immagine al di fuori del float, ma la parte che sporge non influisce sull'altro layout. Le vecchie versioni di IE hanno espanso il float per contenere l'immagine, spesso influenzando drasticamente il layout. Un esempio comune è un'immagine che sporge dal contenuto principale spingendo la barra laterale in basso.
  

  

  Soluzione rapida: assicurati di non avere immagini che lo fanno, usa overflow: hidden;per tagliare l'eccesso.

• Double Margin Bug - Un'altra cosa da ricordare quando si ha a che fare con IE 6 è che se si applica un margine nella stessa direzione del float, raddoppierà il margine. Correzione rapida: impostato display: inlinesul float e non preoccuparti, rimarrà un elemento a livello di blocco.
• Il 3px Jog è quando il testo che si trova accanto a un elemento flottante viene misteriosamente cacciato via da 3px come uno strano campo di forza attorno al float. Correzione rapida: imposta una larghezza o un'altezza sul testo interessato.
• In IE 7, il bug del margine inferiore si verificava quando un genitore flottato aveva dei figli flottanti al suo interno, il margine inferiore su quei figli veniva ignorato dal genitore. Soluzione rapida: utilizzare invece l'imbottitura inferiore sul genitore.

Alternative

Se hai bisogno di testo che avvolge le immagini, non ci sono davvero alternative per float. A proposito, dai un'occhiata a questa tecnica piuttosto intelligente per avvolgere il testo attorno a forme irregolari. Ma per il layout della pagina, ci sono sicuramente delle scelte. Eric Sol ha un articolo su A List Apart, Faux Absolute Positioning, che descrive una tecnica molto interessante che in molti modi combina la flessibilità dei galleggianti con la forza del posizionamento assoluto.

CSS3 affronta il layout della pagina in un paio di modi:

• Flexbox
• Layout a più colonne
• Layout della griglia

Sono stati discussi i float posizionati in modo assoluto (ad esempio, si posiziona assolutamente come normale, ma l'elemento è ancora in grado di influenzare altri elementi, come avere il testo che lo circonda), ma penso che l'idea sia stata accantonata a causa di somiglianze con altre idee di layout più robuste.

video

Qualche tempo fa ho fatto uno screencast spiegando molti di questi concetti di float.

Relazionato

• clear
• position

Maggiori informazioni

• float nelle specifiche W3C
• float presso MDN

Supporto browser

Cromo	Safari	Firefox	musica lirica	IE	Android	iOS
Tutti	Tutti	Tutti	Tutti	Tutti	Tutti	Tutti