Nel web design moderno, la proprietà galleggiante utilizzato in quasi ogni fase. Ma nonostante questa prevalenza, non tutti comprendono il meccanismo dei blocchi fluttuanti, il loro comportamento e quali conseguenze potrebbe avere il loro utilizzo.
Cos'è il "galleggiante"?
Galleggiante Questa è una proprietà di posizionamento CSS. Per comprenderne l'essenza e l'origine, è necessario prestare attenzione al disegno stampato. Nei layout stampati, l'immagine può essere posizionata in modo che il testo le scorra attorno. Questo di solito è chiamato " avvolgimento del testo".
In un layout di pagina è possibile specificare un blocco che contiene testo da utilizzare avvolgere il testo attorno a un'immagine o ignorare l'avvolgimento. Ignorare la disposizione del testo consentirà alle parole di scorrere sull'immagine come se non fosse lì. Questo fa la differenza se l'immagine fa parte o meno del flusso sulla pagina. Nel web design tutto è molto simile.
Nel web design, un elemento a cui è applicata una proprietà CSS galleggiante si comporterà come un'immagine con il testo che la avvolge in un layout stampato. Gli elementi mobili rimangono parte del flusso della pagina web. Questo è abbastanza diverso dagli elementi posizionati assoluti, che vengono rimossi dal flusso, come se in un layout stampato al blocco di testo fosse stato detto di ignorare il ritorno a capo dell'immagine. Gli elementi posizionati in modo assoluto non influiscono sul posizionamento di altri elementi e gli altri elementi non influiscono sul loro posizionamento.
Impostazione di una proprietà galleggiante per gli elementi che utilizzano CSS si presenta così:
#sidebar ( float: destra; )
Esistono quattro valori validi per la proprietà galleggiante - Sinistra, Giusto, nessuno, ereditare. I primi due Sinistra E Giusto indicare la direzione della posizione: rispettivamente sinistra e destra. Nessuno- valore predefinito, indica che l'elemento non è mobile e ereditare istruire un elemento ad ereditare il valore di una proprietà galleggiante dall'elemento genitore.
A cosa serve il galleggiante?
Al di là del semplice esempio di avvolgere il testo attorno a un'immagine, galleggiante può essere utilizzato per creare layout web.
Galleggiante, è comodo da utilizzare anche per piccoli elementi di layout. Ad esempio, prendiamo questo piccolo frammento di una pagina web. Se impostiamo la proprietà galleggiante Per un'immagine avatar piccola, quando la dimensione dell'immagine cambia, la disposizione cambierà in base alle nuove dimensioni dell'immagine:
Lo stesso layout può essere implementato utilizzando il posizionamento relativo del contenitore e il posizionamento assoluto dell'avatar e del testo al suo interno. Ma in un layout realizzato secondo questo schema, la modifica della dimensione dell'immagine non influirà sul blocco di testo, poiché gli elementi con posizionamento assoluto non influenzano gli altri elementi e gli altri elementi non influenzano loro.
Reimpostazione dell'avvolgimento
Chiaro proprietà relativa alla proprietà galleggiante. Elemento con set di proprietà chiaro non si sposterà verso l'alto attorno a un elemento con la proprietà impostata galleggiante, ma si sposterà verso il basso ignorando il flusso. E ancora, un'illustrazione che spiegherà tutto senza ulteriori indugi.
Nell'esempio sopra, la barra laterale fluttuava a destra del blocco del contenuto principale. Il “footer” si è spostato nello spazio libero sotto la barra laterale, scorrendo attorno al blocco con il contenuto principale. Per risolvere questo problema, è necessario specificare un valore per la proprietà clear:both del piè di pagina per "pulire" il flusso attorno a entrambe le colonne.
#footer ( chiaro: entrambi; ) 
Proprietà chiaro ha quattro significati. Entrambi utilizzato per scaricare il flusso in entrambe le direzioni. Sinistra E Giusto vengono utilizzati per reimpostare una direzione, rispettivamente sinistra o destra. Nessuno- valore di default. Ereditare potrebbe essere il quinto valore, ma sorprendentemente non è supportato Internet Explorer. Reimpostare solo il flusso sinistro o destro è piuttosto raro, ma presenta vantaggi pratici.
Grande crollo
Una cosa riguardo al lavorare con galleggiante Ciò che lascia perplessi è l'effetto che questa proprietà ha sugli elementi genitori. Se l'elemento genitore non contiene altri elementi oltre a un float, la sua altezza crolla letteralmente. Ciò non è sempre evidente, soprattutto se l'elemento principale non ha uno sfondo prominente, ma è importante tenerlo presente.
Ma l’alternativa a un simile collasso è ancora peggiore. Considera il seguente scenario:
Se il blocco superiore si espande automaticamente per accogliere l'elemento mobile, ci ritroveremo con uno spazio vuoto nel flusso di testo tra i paragrafi, senza alcun modo per risolverlo. Se così fosse, gli sviluppatori si lamenterebbero molto più spesso di questo comportamento dei blocchi mobili di quanto non facciano ora del collasso.
La compressione dovrebbe essere sempre tenuta presente per evitare comportamenti strani del layout e problemi tra browser. Possiamo risolvere questo problema utilizzando chiaro dopo l'elemento mobile nel contenitore, ma prima che il contenitore si chiuda.
Tecniche di cancellazione del wrapper
Se ti trovi in una situazione in cui sai dove sarà l'elemento successivo, puoi utilizzare clear:both e occuparti dei tuoi affari. Questo è l'ideale poiché non richiede hack o elementi aggiuntivi. Ma sfortunatamente di solito non tutto va come vorremmo, e in questo caso puoi utilizzare i seguenti strumenti.
Metodo del blocco vuoto.
È letteralmente un isolato vuoto.
. A volte puoi trovare un elemento
o qualsiasi altro elemento casuale, ma div è il più comune poiché non ha uno stile predefinito nei browser, non ha funzioni speciali ed è improbabile che abbia uno stile CSS generale. Questo metodo è rifiutato dai puristi della semantica perché la sua presenza non ha alcun significato contestuale sulla pagina ed è lì solo per apparenza. Certo, in senso stretto hanno ragione, ma lui fa il suo lavoro e non fa male a nessuno.
Metodo di trabocco.
Basato sulla specifica delle proprietà CSS traboccamento per l'elemento genitore. Se questa proprietà è impostata su auto O nascosto per l'elemento genitore, si espanderà dopo l'elemento mobile, reimpostando di fatto il suo avvolgimento per gli elementi successivi. Questo metodo può essere semanticamente bello, poiché non richiede elementi aggiuntivi. Tuttavia, come puoi vedere, ne abbiamo aggiunto uno nuovo div utilizzare questo metodo, che equivale a utilizzare un blocco vuoto non semantico ed è meno flessibile. Va inoltre ricordato che l'immobile traboccamento non è destinato a disabilitare il wrapper. Fare attenzione a non nascondere accidentalmente contenuti o visualizzare barre di scorrimento indesiderate.
Metodo di pulizia semplice.
Utilizza uno pseudo-selettore CSS (:after) per rimuovere il wrapper. Invece di utilizzare la proprietà traboccamento Per l'elemento genitore, imposta una classe aggiuntiva, ad esempio "clearfix" e utilizza il seguente stile CSS:
Clearfix:after ( contenuto: "."; visibilità: nascosto; display: blocco; altezza: 0; cancella: entrambi; )
Questo utilizza una piccola parte di contenuto nascosta alla vista, situata dopo l'elemento genitore, che reimposta il wrap. Questo metodo non è completo, poiché deve essere migliorato per supportare i browser più vecchi.
Situazioni diverse richiedono metodi diversi per ovviare al bluff. Prendiamo come esempio una griglia di diversi tipi di blocchi.
Per combinare visivamente blocchi simili, dovremmo iniziare una nuova riga quando il colore cambia. Possiamo utilizzare il metodo di overflow o di compensazione della luce se ciascun gruppo di colori ha un elemento genitore. Oppure usiamo il metodo del blocco vuoto tra i gruppi. Tre blocchi principali che non esistevano in precedenza o tre blocchi vuoti che non esistevano in precedenza. Sta a te decidere quale metodo è migliore.
Problemi con elementi fluttuanti
Gli elementi galleggianti sono spesso criticati a causa della loro fragilità. Gran parte di questa fragilità deriva da IE6 e dai suoi bug orientati al float. Ma poiché sempre più sviluppatori abbandonano il supporto per IE6, potresti non pensarci, ma per coloro che hanno a cuore la compatibilità, ecco un breve elenco.
Spinta verso il basso, è un sintomo che l'elemento all'interno del blocco mobile è più largo di quel blocco (questo di solito accade con le immagini). La maggior parte dei browser farà risaltare l'elemento flottato, ma ciò non avrà alcun effetto sul layout. IE espanderà il blocco mobile e spesso questo ha un effetto drastico sul layout. Un tipico esempio è un'immagine che sporge dal blocco del contenuto principale, spingendo la barra laterale verso il basso.
Soluzione rapida al problema: usa overflow: nascosto; per eliminare l'eccesso.
Bug del doppio margine- un'altra cosa da ricordare quando si lavora con IE6. Questo bug si esprime nel fatto che se il campo è dallo stesso lato in cui è orientato galleggiante, il campo è raddoppiato. Per esempio:
Inseriremo il campo sinistro 40px., invece di 20px.
Soluzione rapida al problema: imposta display: inline per il blocco mobile e non preoccuparti, l'elemento rimarrà a livello di blocco.
3px Jogging. L'essenza di questo bug è che il testo situato accanto all'elemento mobile viene stranamente spostato di tre pixel, come se fosse sotto l'influenza di un campo di forza situato attorno all'elemento mobile. Soluzione rapida al problema: imposta la larghezza e l'altezza del testo interessato.
Appare in IE7 Bug del margine inferiore, quando l'elemento genitore è un elemento mobile e anche il suo figlio situato al suo interno è un elemento mobile. Il margine inferiore (margin-bottom) del figlio viene ignorato dall'elemento antenato. Soluzione rapida al problema: utilizza il riempimento-bottom sull'elemento genitore anziché il margine-bottom sull'elemento figlio.
Vediamo cosa succede agli elementi quando viene loro applicata la proprietà float:
- L'elemento "fluttua" e viene premuto contro il bordo sinistro (se float: left) o destro (float: right) dell'elemento genitore o dell'elemento anch'esso impostato su float
- Se un elemento non può stare in una riga con un altro elemento a causa della larghezza del blocco genitore, verrà spostato verso il basso finché non ci sarà spazio sufficiente per esso
- Altri elementi di blocco per i quali non è specificato float si comportano come se l'elemento con float non fosse sulla pagina (l'elemento ha float). Le linee “sanno” che l'elemento ha fluttuato e lo avvolgono
- La larghezza di un blocco impostato su mobile è determinata dal contenuto.
Diamo un'occhiata a un esempio. Decommentare la proprietà float: left all'interno del CSS. Guarda il risultato.
Sostituisci float:sinistra con float:destra.
La proprietà float è utile per consentire al testo di scorrere attorno alle immagini. Considera un esempio:
Aggiungi un commento alla proprietà float: left nel file CSS. Guarda come cambierà il layout della pagina. Sostituisci float: left con float: right.
"Collapse" dell'elemento genitore quando compaiono i "figli".
Lascia che l'elemento due sia posizionato all'interno dell'elemento uno. Per impostazione predefinita, l'altezza uno si estenderà su tutto il contenuto. Non appena applichiamo la proprietà float ai due elementi, questi fluttuano e l'elemento genitore uno non saprà che due esistono. Se due non ha contenuto, la sua altezza è zero. Questo comportamento è chiamato "collasso". Per evitare che il genitore venga compresso, gli viene data la proprietà min-height - l'altezza minima, oppure viene utilizzato un metodo: viene aggiunto un altro blocco, per il quale è impostata la proprietà:
| 1 |
Questo blocco non è visibile sulla pagina, ma la proprietà clear:both rimuove l'avvolgimento degli elementi e allunga il genitore all'altezza del contenuto.
Decommenta la proprietà float:left nei CSS. Guarda come si comporta l'elemento genitore:
Considera un esempio utilizzando clear: entrambi
Quindi hai acquisito familiarità con le proprietà di base di float. Mettiamo in pratica le nostre conoscenze.
Eseguire
Esercizio 1. Aggiungi classi alle immagini. Nelle classi, specificare la proprietà float:left. Studia come cambierà l'output della pagina.
Le domande su come funzionano le proprietà CSS float left e float right sorgono con invidiabile regolarità. Questo diventa un argomento particolarmente doloroso per i progettisti e i programmatori di layout che da anni mettono insieme layout sui tavoli e ora sono costretti a lavorare con i blocchi. Inoltre, questo è aggravato dai problemi di layout del cossbrowser, anche se recentemente questo argomento ha in qualche modo iniziato a calmare i nervi degli specialisti.
In ogni caso, invece di rispondere costantemente alle stesse domande su come funzionano le proprietà CSS float left e float right, ho deciso di scrivere un post e far soffrire tutti.
Ti assicuro che non ci sarà nulla di particolarmente nuovo in questo post. Ci sono molte informazioni come questa su Internet. Ma ogni volta che mostro un esempio tra le dita o cerco un link dove mandare il mio prossimo dipendente, sono già stanco. Pertanto, qui presenteremo una breve raccolta di ciò che incontriamo più spesso.
Blocchi in un contenitore con le proprietà CSS float left e float right impostate
Problema tipico:
- C'è un contenitore con due o più blocchi.
- I blocchi interni hanno la proprietà CSS float sinistra o destra impostata.
- Se la dimensione del blocco non è sufficiente, il contenuto dal basso inizia ad adattarsi al blocco e l'intero layout cade a pezzi.
Le illustrazioni seguenti mostrano un paio di casi simili.
Situazione con due o più blocchi con proprietà CSS float left
Dovrebbe essere:
La situazione in cui un blocco ha la proprietà CSS float a sinistra e un altro ha la destra
Dovrebbe essere:
Come appare se il layout non è corretto:
Perché si è verificata questa situazione?
I nostri blocchi con le proprietà CSS float left e float right si trovano all'interno di un contenitore a cui viene fornito del riempimento nella parte inferiore. Nonostante i parametri apparentemente corretti, il rientro dal basso non solo non funziona, ma anche il contenuto dei blocchi inferiori si insinua nel nostro blocco superiore.
Il fatto è che i blocchi con proprietà float specificate non influenzano la modifica dell'altezza del loro contenitore.
Ad esempio: nel primo caso tutti i blocchi all'interno del contenitore sono flottanti. Pertanto l'altezza del contenitore sarà zero.
Nel secondo caso, oltre ai blocchi flottanti, nel contenitore abbiamo anche del testo. Pertanto, l'altezza del contenitore corrisponderà all'altezza del testo che riempie questo blocco. Di conseguenza, se il testo è più grande dell'altezza dei blocchi mobili interni, non noterai il problema. Se non c'è abbastanza testo, come nell'esempio sopra, il contenuto dei blocchi inferiori si estenderà fino al bordo inferiore del contenitore.
Soluzione 1 Aggiungi un blocco vuoto con la proprietà CSS chiara: entrambi
Prima del tag contenitore di chiusura, devi posizionare un blocco con la proprietà CSS clear:both. Quindi il contenitore verrà espanso nel blocco inferiore, poiché questa proprietà blocca l'influenza dei blocchi con le proprietà CSS float left e float right.
Codice della pagina di esempio:
Puoi anche posizionare un blocco con la proprietà clear:both immediatamente dopo il tag di chiusura del contenitore o dopo l'ultimo blocco mobile. Il contenitore non cambierà la sua dimensione in questa situazione. E in generale, non sarà necessario, ma un blocco con la proprietà clear:entrambi semplicemente taglia il contenuto dai blocchi mobili.
Codice della pagina di esempio:
Non tutti sanno però che il campo delle direzioni corrisponde al determinante di un sistema di equazioni lineari, il che non sorprende. Inoltre, il determinante di un sistema di equazioni lineari ripristina categoricamente il vettore, come previsto. La vicinanza del punto è ancora richiesta. Il lemma, come segue da quanto sopra, stabilizza in modo significativo la serie astratta divergente, che senza dubbio ci condurrà alla verità. Il lemma svela in modo significativo l'inconfutabile logaritmo naturale; lasceremo gli ulteriori calcoli agli studenti come semplici compiti a casa.
Codice CSS di esempio:
Contenitore ( display: blocco; ) .in_block ( display: blocco; float: sinistra; larghezza: 100px; altezza: 100px; margine destro: 10px; ) .clear ( display: blocco !importante; margine: 0px !importante; riempimento: 0px !importante; chiaro: entrambi !importante; float: nessuno !importante; altezza: 1px !importante; larghezza: auto !importante; )
Metodologicamente non è la soluzione più elegante, anche se merita il diritto alla vita, poiché è piuttosto efficace. Un chiaro svantaggio è il fatto che dobbiamo aggiungere codice extra al testo della pagina.
Soluzione 2: specificare esplicitamente l'altezza del contenitore
L'opzione di impostare l'altezza del contenitore è utile solo se conosci esattamente la dimensione prevista del contenuto di questo contenitore. Quindi il nostro CSS sarà simile a questo:
Contenitore ( display: blocco; altezza: 100px; ) .in_block ( display: blocco; float: sinistra; larghezza: 100px; altezza: 100px; margine destro: 10px; )
Nel caso in cui il contenuto sia dinamico o il layout sia “fluido” e la larghezza del contenitore possa cambiare, questa non sarà una buona soluzione.
Soluzione 3: imposta la proprietà di overflow CSS sul contenitore
Se imposti il valore della proprietà del contenitore traboccamento pari auto O nascosto, il browser ricostruirà il contenitore in modo tale da adattarsi a tutti i blocchi mobili e non visualizzare le barre di scorrimento.
Se imposti la proprietà di overflow su auto, preparati al fatto che in alcune situazioni le barre di scorrimento potrebbero ancora apparire. Pertanto, dovresti controllare attentamente il layout in diverse modalità.
Codice CSS di esempio:
Contenitore ( display: blocco; overflow: auto; ) .in_block ( display: blocco; float: sinistra; larghezza: 100px; altezza: 100px; margine destro: 10px; )
Due blocchi sullo stesso livello con le proprietà CSS specificate fluttuano a sinistra e fluttuano a destra
Una situazione tipica: testo che si avvolge attorno a due blocchi con del contenuto. In questo caso i blocchi si trovano ai lati del testo.
Dovrebbe essere:
Tutti gli elementi che appaiono su una pagina HTML non sono altro che rettangoli. E fondamentalmente solo due tipi:
- blocco (blok), che occupano tutta la larghezza dove si trovano, e sono separati da ciò che è sopra e sotto di loro. Ad esempio, questi sono i tag DIV, P, H.
- integrato (in linea). Ad esempio, SPAN, STRONG, EM, A e IMG.
tavoli.
Il ruolo della proprietà è aumentato dopo il passaggio dal layout tabella al layout div. Questo perché float consente a uno sviluppatore web di includere colonne senza dover ricorrere a una tabella. Può assumere valori Giusto, Sinistra, ma no centro.
In precedenza, il layout della pagina veniva eseguito utilizzando tavoli.
Il ruolo della proprietà float è aumentato dopo la transizione dal layout tabella al layout div. Questo perché float consente a uno sviluppatore web di includere colonne senza dover ricorrere a una tabella. Può assumere valori Giusto, Sinistra, ma no centro.
Utilizzo del display: blocco; proprietà o visualizzare: in linea; stiamo convertendo un tipo di rettangolo in un altro. Ad esempio, un elenco UL che ha un numero di blocchi LI può essere disposto orizzontalmente:
- PARAGRAFO
- PARAGRAFO
- PARAGRAFO
- PARAGRAFO
- PARAGRAFO
- PARAGRAFO
Quando si utilizza la proprietà float, il rettangolo ha la forma di un blocco, ma con una particolarità: la sua larghezza non si estenderà all'intero contenuto. Ad esempio, un'intestazione h3 assomiglia a:
questa è l'INTESTAZIONE h3
Se impostiamo la proprietà display: inline;, vedremo che non è cambiata solo la larghezza, ma anche la distanza sopra e sotto l'elemento:questa è l'INTESTAZIONE h3
Ma se voglio posizionare l'elemento a destra e aggiungere text-align:right; questa volta otteniamo:questa è l'INTESTAZIONE h3
Ed è completamente diverso se float: giusto;. Tieni presente che la distanza sopra e sotto l'elemento rimane invariata:questa è l'INTESTAZIONE h3
Come si comporteranno gli elementi accanto al titolo?Il testo superiore rimane invariato poiché un elemento flottato non può essere posizionato sopra la riga su cui viene creato.
questa è l'INTESTAZIONE h3
Ma il testo rosso si trova sotto il titolo e lo avvolgerà senza avere stili aggiuntivi. E solo l'altezza h3 verrà superata, la pagina tornerà al suo ordine naturale.
A B C D Diversi elementi fluttuanti seguiranno la sequenza della loro posizione. UNBING testo...
E l'allineamento viene eseguito lungo il bordo inferiore delle lettere che si trovano sullo stesso lato.
A B C D Se camminiamo in modo che il flusso attorno all'elemento si interrompa da un certo momento (da qui), viene applicata la proprietà clear. Possiamo aggiungerlo a un tag vuoto
Per posizionare uniformemente più rettangoli di blocchi, diamo loro la stessa larghezza.
Il layout tabellare è molto comodo e comprensibile, motivo per cui è apparso il suo display analogico: tabella;. La stessa forma si ottiene con meno codice.
Ora puoi vedere come è costruita la galleria di immagini. Spero che nessuno se ne sia dimenticato.
testo...
testo...
Link alle fonti:
Float è una proprietà CSS per il posizionamento degli elementi. Per comprenderne lo scopo e l'origine, puoi rivolgerti al design di stampa. In un layout di stampa, le immagini possono essere posizionate sulla pagina in modo che il testo "scorre" attorno ad esse. Questo di solito è chiamato "avvolgimento del testo".
Nei programmi di impaginazione, gli elementi con testo possono prendere in considerazione le immagini, oltre a ignorarle. Se vengono ignorate, il testo apparirà sopra le immagini come se non ci fossero. Questa è la differenza principale tra il fatto che le immagini facciano parte o meno del flusso principale della pagina. Il web design è molto simile.
Nel web design, gli elementi della pagina con la proprietà float impostata si comportano esattamente come le immagini stampate quando il testo "scorre" attorno a loro. Tali elementi fanno parte del flusso principale della pagina web. Tuttavia, le cose sono diverse se gli elementi utilizzano il posizionamento assoluto. Gli elementi posizionati in modo assoluto vengono rimossi dal flusso principale della pagina, in modo simile all'esempio precedente in cui nella stampa il testo ignora le immagini. Tali elementi non influenzano la posizione di altri elementi, che si tocchino o meno.
L'impostazione della proprietà float funziona in questo modo:
#sidebar ( float: destra; )
Ci sono un totale di 4 valori per la proprietà float. Sinistra e destra vengono utilizzate per le direzioni corrispondenti. Nessuno (impostazione predefinita): garantisce che l'elemento non fluttui. Ed inherit , che dice che il comportamento dovrebbe essere lo stesso dell'elemento genitore.
A cosa serve il galleggiante?
Oltre a disporre il testo attorno alle immagini, float può essere utilizzato per creare il layout di un intero sito.
La proprietà float è utile anche su scala ridotta. Ad esempio, considera una piccola area su una pagina del sito web. Supponiamo che tu usi float per il tuo avatar, quando cambi la dimensione dell'immagine, la dimensione del testo verrà regolata per adattarsi all'immagine.
La stessa disposizione degli oggetti può essere ottenuta utilizzando il posizionamento. All'oggetto contenitore viene assegnato il posizionamento relativo e all'oggetto immagine viene assegnato il posizionamento assoluto. In questo caso l'avatar non influenzerà la posizione del testo.
Disabilitare la proprietà float
Per float, la proprietà correlata è chiara. Qualsiasi elemento con la proprietà clear impostata non verrà spostato in alto come previsto, ma verrà visualizzato sotto gli elementi float. Forse un esempio in un'immagine spiegherà meglio delle parole.
Nell'esempio, la barra laterale viene spostata a destra (float: right;) e la sua altezza è inferiore all'area del contenuto principale. Pertanto, il piè di pagina verrà sollevato più in alto perché ha un'altezza sufficiente e il comportamento float lo richiede. Per risolvere la situazione, è necessario impostare la proprietà clear, che garantisce che l'elemento venga visualizzato sotto gli elementi float.
#footer ( chiaro: entrambi; ) 
La proprietà clear può avere quattro valori. Entrambi, il più comunemente usato, vengono utilizzati per annullare il float di ciascuna direzione. Sinistra e Destra: utilizzati per annullare il movimento di una delle direzioni. Nessuno: predefinito, solitamente non utilizzato a meno che non sia necessario cancellare. inherit sarebbe il quinto valore, ma stranamente non è supportato in Internet Explorer. Cancellare solo un float sinistro o destro è molto meno comune, ma ha sicuramente i suoi scopi.
Grande crollo
Un'altra cosa sorprendente della proprietà float è che il suo utilizzo può influenzare l'elemento genitore. Se un tale elemento contiene solo elementi float, crolla letteralmente, cioè la sua altezza è zero. Ciò non è sempre evidente a meno che l'elemento genitore non abbia una sorta di sfondo visibile impostato.
Questo collasso sembra illogico, ma l’alternativa è anche peggiore. Considera questo esempio:
Se l'elemento block in alto si espande automaticamente per accogliere tutti gli elementi float, ci ritroveremo con uno spazio innaturale nel testo tra i paragrafi, senza alcun modo per risolverlo. Se così fosse, i nostri progettisti si lamenterebbero molto più spesso di questo comportamento che del crollo.
Pertanto, il collasso è quasi sempre necessario per evitare difficoltà di layout. Per modificare questo comportamento, è necessario aggiungere un elemento di annullamento float dopo gli elementi float, ma prima di chiudere l'elemento genitore.
Modi per annullare il float
Se sai che dopo gli elementi float verrà sempre visualizzato qualche altro elemento (ad esempio un piè di pagina), devi solo impostare la proprietà clear: Both; , come nell'esempio sopra, e continua a fare le tue cose. Questo è l'ideale perché non richiede hack o elementi aggiuntivi. Naturalmente, non tutto nella nostra vita è così fluido e ci sono momenti in cui questo metodo non è sufficiente. Pertanto, è necessario disporre di diversi metodi aggiuntivi nel proprio arsenale.
- Metodo div vuoto. Viene utilizzato un div letteralmente vuoto. . A volte è possibile utilizzare un elemento al suo posto
o qualsiasi altra cosa, ma div viene utilizzato più spesso perché per impostazione predefinita non ha stile, nessuno scopo speciale ed è improbabile che gli venga applicato uno stile generale tramite CSS. Gli appassionati del markup semanticamente puro potrebbero non apprezzare questo metodo, poiché la presenza di un div vuoto non ha alcun significato contestuale e viene inserito nella pagina solo per ragioni di progettazione. Naturalmente, a rigor di termini, hanno ragione, ma sta facendo il suo lavoro e non fa del male a nessuno. - Metodo di trabocco. In base al fatto che l'elemento genitore deve impostare la proprietà overflow. Se questa proprietà è impostata su auto o hidden , l'elemento genitore si espanderà per accogliere tutti gli elementi float. Questo metodo sembra più semanticamente corretto poiché non richiede elementi aggiuntivi. Tuttavia, se dovessi utilizzare un altro div solo per utilizzare questo approccio (ovvero il div genitore), allora sarebbe lo stesso dell'esempio precedente con l'aggiunta di un div vuoto. Inoltre, ricorda che la proprietà overflow ha uno scopo diverso. Fai attenzione e non permettere che alcuni dei tuoi contenuti scompaiano o che appaiano barre di scorrimento non necessarie.
- Metodo di pulizia semplice. Questo metodo utilizza il meraviglioso pseudo-selettore CSS :after. Molto meglio che usare l'overflow sull'elemento genitore. Basta dargli una classe aggiuntiva, dichiarata in questo modo: .clearfix:after ( content: "."; visibilità: hidden; display: block; altezza: 0; clear: Both; ) Questo metodo aggiunge contenuto invisibile e annulla float E comunque, questa non è tutta la storia su come utilizzare il codice aggiuntivo nei browser più vecchi.
E, come capisci, ogni metodo viene utilizzato in situazioni diverse. Prendiamo ad esempio una griglia di elementi blocco di diverso tipo.
Per una migliore presentazione visiva, sarebbe carino combinare blocchi simili. Ad esempio, vogliamo che ogni tipo inizi su una nuova riga, nel nostro caso il tipo di elemento è determinato dal colore. Possiamo utilizzare il metodo di overflow o il "metodo di cancellazione semplice" se ogni gruppo ha il proprio elemento contenitore. Oppure possiamo utilizzare il metodo div vuoto tra ciascuno dei gruppi. Tre elementi contenitore o tre div vuoti, dipende da te quale sia la soluzione migliore per il tuo compito.
Problemi con i galleggianti
Le persone spesso cercano di aggirare i Float perché devono essere gestiti con molta attenzione. La maggior parte dei bug è arrivata con IE6. Poiché sempre più web designer smettono di supportare IE6, potresti non preoccuparti di questi problemi. Ma per coloro che se ne preoccupano, ecco un breve elenco.
Alternative al galleggiamento
Se hai bisogno di testo per avvolgere un'immagine, non ci sono alternative. Ma per il layout della pagina ci sono sicuramente delle scelte. Esistono alcuni approcci molto interessanti che combinano la flessibilità del galleggiamento con la potenza del posizionamento assoluto. CSS3 ha qualcosa chiamato Modulo di layout del modello, che fornirà una degna alternativa al galleggiamento in futuro.
