Dopo che mi è stato chiesto per la sessantottesima volta il motivo per cui il blocco con un float è visualizzato in modo errato, ho deciso di scrivere questa nota, che spiegherebbe le situazioni tipiche che deve affrontare un progettista di layout alle prime armi, e anche in modo che la prossima volta possa semplicemente dare un collegamento a questo articolo.
Disclaimer
Non sono un layout designer professionista, anche se per la natura della mia attività ho dovuto realizzare più di una dozzina di siti. Ho amici che stanno imparando a comporre e voglio aiutarli. Molto probabilmente li hai anche tu. Lo scopo di questo articolo non è quello di raccontare qualcosa di nuovo, ma di raccontare il vecchio dal punto di vista dei problemi più comuni per i progettisti di layout principianti. Non rivendico l'assoluta verità delle mie parole e sarò lieto solo se mi correggi e mi integri.Proprietà dell'elemento mobile da tenere a mente
se è impostato a sinistra o a destra- L'elemento viene visualizzato come un blocco, come se avesse display: block;
- Elemento si restringe in larghezza alla dimensione del contenuto, se l'elemento non è impostato esplicitamente su larghezza;
- Elemento bastoni al bordo sinistro (sinistra) o destro (destra);
- Tutto il resto contenuto della pagina in codice HTML dopo l'elemento float lo avvolge;
Caso di vita n. 1
Ho due blocchi, ho applicato float: proprio su uno dei blocchi, si è allineato a destra, ma è rimasto comunque sotto il primo. Un esempio di come appare.
Causa
Se ciò è accaduto, hai applicato il float non al primo, ma al secondo blocco. A causa del fatto che l'elemento floating (quello con float) avvolge solo gli elementi che vanno nel codice HTML dopo esso, il primo blocco non lo avvolgerà.Anche gli elementi di blocco per impostazione predefinita hanno la massima larghezza possibile (prova) all'interno del genitore. Il tuo elemento mobile semplicemente non si adatta alla stessa riga del primo elemento di blocco con larghezza massima, quindi viene spinto verso il basso.
Stessa strada tutti contenuto del sito fornito in codice HTML dopo elementi fluttuanti, scorre intorno a loro, il che spesso porta a un effetto inaspettato.
Soluzione
Soluzione n. 1 Imposta in modo esplicito l'altezza del contenitore. Nei casi in cui si sa quali dovrebbero essere le dimensioni del contenitore, questa è la soluzione più semplice.Soluzione n. 2 Aggiungi un blocco vuoto con clear: both . L'aggiunta di un elemento come questo ripulisce la "galleggiabilità" dei blocchi e fa allungare il contenitore a tutta altezza. Semanticamente, questo non lo è la migliore soluzione, poiché introduce un elemento di markup aggiuntivo.
Soluzione n. 3 Applica overflow: auto (o nascosto) al file . Fa in modo che il contenitore ricalcoli l'altezza e la modifichi per includere elementi mobili, altrimenti dovrebbe aggiungere una barra di scorrimento o nasconderli. Tuttavia, a volte succede, quindi fai attenzione.
UPD
Leggi anche come continuazione della discussione sulla proprietà float.
Ciao, cari lettori del sito blog! Dopo una pausa molto significativa, ho deciso di continuare l'argomento apprendimento CSS e l'articolo di oggi sarà dedicato alla creazione di elementi fluttuanti usando float, usando esempi pratici, considera l'azione questa regola insieme alla proprietà clear per creare colonne e menù orizzontale.
Per chi non lo sapesse, penso che sarebbe più corretto familiarizzare prima con altri materiali sui fogli di stile a cascata. Lascia che ti ricordi che tutti gli articoli su questo argomento situato nella sezione in cui è possibile ottenere le informazioni necessarie.
Gli elementi mobili si trovano anche in HTML quando necessario per racchiudere le stesse immagini con del testo (l'attributo align tag img con parametri sinistro e destro). Quindi questo aspetto è molto popolare quando si sviluppa il contenuto delle pagine web.
Durante il post di oggi, daremo un'occhiata le azioni delle regole fluttuano (sinistra, destra, nessuna) e cancellano anche rispetto a , che sono la base per disposizione dei blocchi. Naturalmente, allo stato attuale, la stragrande maggioranza utilizza CMS progressivi (in particolare WordPress) durante la creazione di un sito. Tuttavia, confida nel fatto che la conoscenza delle basi degli stili e del linguaggio di marcatura degli ipertesti ti sarà utile in futuro.
Come vengono creati i float in CSS usando float
Per cominciare, vorrei ricordarti che in un flusso normale, gli elementi web sono allineati su una pagina web in stretta conformità con l'ordine specificato nel codice. Tuttavia, come sai, ci sono sempre delle eccezioni. Questo è logico, dal momento che la leva è necessaria per risolvere compiti non standard.
Uno di questi strumenti è, ad esempio, di cui puoi leggere di più al link fornito. Bene, un altro mezzo che ti permette di cambiare l'ordine visualizzazione standard elementi web, serve solo la regola float.
I dati su qualsiasi proprietà CSS (proprietà) e i suoi valori possono essere raccolti dalla pagina delle specifiche del W3C, dove vengono fornite tutte le informazioni (dati sulla seconda versione dei fogli di stile, ma questo vale anche per CSS3, che è già ufficiale, anche se non del tutto finalizzato):
Come puoi vedere, float può prendere uno dei tre parametri possibili (sinistra, destra, nessuno) e (ereditare). galleggiante nessuno applicato per impostazione predefinita e significa che gli elementi verranno visualizzati in ordine secondo il flusso normale. Ma destra o sinistra consentono di creare blocchi mobili spostato rispettivamente a destra o a sinistra.
Se vi ricordate, i più usati , che si comportano in modo diverso (in generale, il tipo di visualizzazione di tutti gli elementi è implementato tramite CSS usando la proprietà Display). I livelli di blocco occupano l'intera larghezza disponibile a meno che non venga specificata la larghezza. L'altezza è determinata dal contenuto se il parametro altezza non è specificato.
I tag in linea si trovano su una riga e vengono trasferiti su un'altra solo se lo spazio disponibile in larghezza si esaurisce. IN solito caso non è possibile specificarne altezza e larghezza. Sulla base di queste informazioni, si consideri un esempio specifico.
Per chiarezza, colleghiamo le regole CSS (questo metodo è solitamente usato raramente nella pratica, ma è molto comodo durante i test).
Per essere sicuri che quanto sopra sia corretto, prendiamo due tag minuscoli, scrivendo per loro proprietà di larghezza e altezza così come uno etichetta di blocco. Per garantire la chiarezza, impostiamo le sfumature di colore per ogni blocco utilizzando lo sfondo (allo stesso modo, puoi):
elemento in linea 1 Elemento in linea 2
L'immagine risultante sarà la seguente:
Come puoi vedere, abbiamo ricevuto una conferma pratica che l'altezza (altezza:50px) e la larghezza (larghezza:450px) specificate non funzionano in condizioni normali per il tag SPAN, che è inline. Quindi, proviamo a impostare la proprietà float right per il primo elemento web inline e float left per il secondo:
Elemento in linea 1 Elemento in linea 2
Di conseguenza, otteniamo:
È abbastanza ovvio che in questo caso il primo e il secondo elemento web diventano fluttuanti (uno si è spostato completamente a sinistra, l'altro a destra). Inoltre, hanno acquisito una larghezza e un'altezza specificate negli stili CSS.
Inoltre, gli elementi web definiti dal tag SPAN inline interagiscono in modo diverso con il contenitore DIV adiacente. Se rimuoviamo ulteriormente, diciamo, l'attributo width dagli stili di entrambi Tag SPAN, quindi la loro larghezza sarà determinata dal contenuto (nel nostro caso, la lunghezza del testo con il nome degli elementi):
Ora il contenuto del blocco DIV inizia a scorrere a destra dell'elemento web con float: left. Ha senso familiarizzare più chiaramente con i risultati di una ricerca pratica specifica su questa pagina Web, dove puoi provare a cambiare tu stesso il viewport e osservare come si comportano i blocchi l'uno rispetto all'altro:
Riassumendo, definiamo alcune caratteristiche che saranno inerenti a un contenitore con uno o un altro valore della proprietà float (destra o sinistra):
- L'elemento viene spostato sul bordo sinistro o destro;
- Diventa a blocchi, non importa cosa fosse prima;
- Si comporta come se gli elementi web di blocco adiacenti (con la regola display:block) non esistessero. Puoi vederlo se dai un'altra occhiata agli screenshot. questa sezione articoli;
- Allo stesso tempo, i tag inline (display:inline) si avvolgeranno attorno ai blocchi mobili. Se guardi di nuovo allo screenshot precedente, noterai che il contenuto del contenitore DIV (l'"elemento di blocco") avvolge lo SPAN con float:left sulla destra.
- Se non specifichi esplicitamente la larghezza del blocco mobile (nel nostro esempio, width: 450px), sarà determinato dal suo contenuto;
In questo esempio, abbiamo esaminato le caratteristiche principali dei blocchi mobili con diversi parametri di proprietà float e abbiamo scelto elementi Web inline e block (con valori diversi) per complicare il compito. Visualizza i valori). Per consolidare il materiale, assicurati di guardare il video informativo di E. Popov:
Come creare un menu orizzontale con CSS (float)
Successivamente, analizzeremo un compito molto specifico di creare un menu orizzontale utilizzando blocchi mobili, che viene molto spesso utilizzato nello sviluppo di siti Web. Per prima cosa, costruiamo il , il cui codice sarà simile a questo:
- Paragrafo 1
- Punto 2
- Punto 3
- Articolo 4
- Voce 5
- nessuno - annulla l'azione della proprietà clear stessa, di conseguenza, il contenuto del tag (ad esempio testo) avvolge l'elemento web secondo gli stili specificati sotto forma di float;
- sinistra e destra: elimina l'avvolgimento rispettivamente dal bordo sinistro o destro;
- entrambi - Impedisce il flusso a destra ea sinistra contemporaneamente. Questo è il valore chiaro più comune nell'uso pratico.
- C'è un contenitore con due o più blocchi.
- I blocchi interni hanno la loro proprietà CSS float sinistra o destra impostata.
- Se la dimensione dei blocchi non è sufficiente, il contenuto dal basso inizia a strisciare nel blocco e l'intero layout viene disperso.
- , tenendo premuti i pulsanti di navigazione usa float: left:
Per dimostrare l'importanza della proprietà float in questo esempio, ecco uno screenshot della stessa immagine dopo aver usato firebug per rimuovere il float: left:
Gallerie fotografiche basate su griglia
Un semplice utilizzo della proprietà float è float:left una serie di foto contenute in un elenco non ordinato, che produce lo stesso risultato di quello che potresti vedere in un layout di tabella.
La pagina dei prodotti di Foremost Canada (vedi immagine sopra) mostra i suoi prodotti in un formato a griglia, accanto alla barra laterale. Le foto vengono visualizzate come un elenco non ordinato con una proprietà float, per tutti
- elementi impostati su float: sinistra. Funziona meglio di una griglia tabella perché il numero di foto in una galleria può cambiare e il layout non sarà influenzato.
La pagina dei futon di Paragon Furniture (vedi immagine sopra) ha un altro esempio di pagina di un prodotto che utilizza un elenco non ordinato con tag mobili
- .
Nella pagina dei risultati di ricerca di iStockphoto (vedi immagine sopra) la stessa griglia di foto strutturate, qui le foto contengono float:left
tag, no- tag.
allineamento campi con un pulsante
Modellazione predefinita degli elementi del modulo per browser diversi può essere problematico. Spesso è necessario inserire in un unico campo modulo, ad esempio un modulo di ricerca elemento accanto al pulsante di invio.
corretta Utilizzo CSS le proprietà float possono essere un compito arduo anche per un programmatore esperto. Questo articolo raccoglie l'uso dei float, nonché alcuni degli errori, con esempi illustrativi.
Cos'è il galleggiante?
Alcuni elementi nei CSS sono elementi di blocco e quindi iniziano su una nuova riga. Ad esempio, se inserisci due paragrafi con tag P, questi verranno posizionati uno sotto l'altro. Altri elementi sono "inline", cioè vengono visualizzati sulla pagina in una riga.Un modo per riassegnare agli elementi un tipo di wrapping consiste nell'usare la proprietà float. Un classico esempio è l'utilizzo di float per allineare un'immagine a sinistra oa destra. Ecco il semplice HTML per l'immagine e il paragrafo:
Lorem ipsum...
Vengono visualizzati su una nuova riga:
Aggiungiamo un po' immagine CSS:
img ( float: destra; margine: 20px; )Il risultato è allineato a destra:
Se è presente più testo, il paragrafo si avvolgerà attorno all'immagine:
Diciamo che dobbiamo fare un rientro di 20 pixel tra l'immagine e il testo. Questa costruzione non funzionerà: p (margine: 20px;)
Correggi in questo modo:
img (margine: 20px;)
Perché il rientro del paragrafo non funziona? Per capirlo, aggiungiamo un frame:
P (bordo: solido 1px nero; )
Il risultato potrebbe sorprenderti:
Si scopre che l'immagine è all'interno di un paragrafo! Ecco perché non funziona proprietà di margine Nel primo caso. Per risolvere questo problema, puoi float:left il paragrafo e specificare una larghezza assoluta:
Strane regole del galleggiante
Passiamo agli usi più avanzati di float: le regole che regolano gli oggetti fluttuanti. Questo potrebbe essere necessario quando si prepara una galleria di immagini. Per esempio:
Per impostazione predefinita, ogni voce dell'elenco apparirà su una nuova riga. Se applichi float:left a ciascuno, le immagini si allineeranno con un'interruzione di riga:
Li ( float: sinistra; margine: 4px; )
Ma cosa succede se le immagini sono di diverse altezze?
Se aggiungiamo una visualizzazione a riga singola agli elementi dell'elenco, risulterà un po' più carino:
Li ( display: in linea; )
E ora allinea verticalmente:
Img ( allineamento verticale: in alto; )
Va ricordato che nel caso di un'altezza maggiore delle immagini, il resto delle immagini avvolge solo una precedente, ad esempio:
Un esempio di modifica dell'ordine degli elementi: ad esempio, abbiamo un elenco di elementi in ordine:
Se vogliamo metterli in ordine inverso, usiamo semplicemente float:right invece di float:left e non dobbiamo cambiare l'ordine nell'HTML:
I float sono utili per raggruppare gli elementi in una pagina, ma il grosso problema è che anche gli elementi successivi (testo o blocco) ottengono una proprietà di wrapping. Ad esempio, abbiamo un blocco di immagini:
Il testo sottostante inizia ad avvolgere l'intero blocco:
Per evitare ciò, è necessario utilizzare la proprietà clear. Se lo applichiamo alla seconda immagine:
Ul li:nth-child(2) ( clear: left; )
Otteniamo questo:
In questo caso, il resto delle immagini continua a ereditare float:left. Di conseguenza, il testo verrà visualizzato goffamente:
Devi applicare clear:entrambi al paragrafo:
P (chiaro: entrambi; )
Il nostro problema è risolto:
Ora supponiamo di voler impostare lo sfondo per la galleria dagli esempi precedenti. Se gli elementi non fossero mobili, questo sarebbe il risultato:
Ul (sfondo: grigio; )
Ma se applichi float:left agli elementi dell'elenco, lo sfondo scompare del tutto:
Se impostiamo prima l'altezza per l'UL:
Ul (altezza: 300px; )
Anche questo non risolve il problema, perché. le dimensioni dello sfondo sono impostate in modo assoluto. Ci aiuterà la classe clearfix, che verrà applicata al div allo stesso livello degli elementi UL.
Clearfix ( chiaro: entrambi; )
C'è un'altra soluzione, usando l'overflow:
Ul ( overflow: auto; )
Nove regole di galleggiamento:
- Gli elementi mobili non possono estendersi oltre il bordo del loro contenitore padre.
- Ogni elemento mobile verrà visualizzato a destra o sotto il precedente con float:left, oppure a sinistra e sotto con float:right.
- Un blocco con float:left non può essere più a destra di un blocco con float:right.
- Un elemento mobile non può estendersi oltre il bordo superiore del suo contenitore.
- Un elemento mobile non può essere posizionato più in alto del box padre o dell'elemento mobile precedente.
- Un elemento mobile non può essere più alto della riga precedente di elementi inline
- Il blocco flottante deve essere posizionato il più in alto possibile.
- Un elemento mobile dopo l'altro non può andare oltre il suo contenitore: va a capo alla riga successiva.
- Un blocco con float:left dovrebbe essere posizionato il più a sinistra possibile e un blocco con float:right dovrebbe essere posizionato il più a destra possibile.
- tag.
Otteniamo qualcosa del genere:
Ora modifichiamo leggermente il menu risultante usando le proprietà CSS: rimuovi i marcatori di fronte a ciascuno degli elementi usando nessuno stile elenco, converti quelli inline in blocchi applicando loro la regola del blocco di visualizzazione e anche, per cambiare, dai ognuno di loro un bel sfondo.
Sarebbe anche utile impostare i margini per migliorare ulteriormente il design allontanando leggermente le voci di menu l'una dall'altra. Per le pagine web di un sito WordPress, puoi impostare il tag UL "menu", per il quale puoi specificare gli stili necessari nel file STYLE.CSS:
Menu (list-style:none;margin:0;padding:15px;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(margin:10px;)
IN questo caso Non utilizzo deliberatamente l'attributo STYLE perché ciò richiederebbe che le stesse proprietà CSS vengano specificate più volte per ogni tag LI. Come risultato delle nostre azioni, il menu apparirà così:
Differenza da versione precedente sorprendente, non è vero? Ora abbiamo un'immagine che assomiglia molto di più a un menu classico. È vero, i punti al suo interno si trovano non orizzontalmente, ma verticalmente. Per soluzione completa le attività devono essere aggiunte per l'elemento Elenca HTML LI float left proprietà, la regola CSS completa diventa:
Menu li(margine:10px;flottante:sinistra;)
Di conseguenza, il menu si trasformerà in una versione orizzontale:
Penso che, sulla base delle informazioni fornite sopra, tu capisca il motivo per cui si è verificata una tale metamorfosi. Ogni elemento web del menu con float a sinistra è guidato dalla posizione del contenitore, dai suoi bordi e cerca di svolgersi spostandosi il più possibile in alto a sinistra. Questo è esattamente ciò che è successo al blocco "Punto 1", che è stato posizionato di conseguenza.
Anche il "Punto 2" si è spostato a sinistra, ma il suo ulteriore avanzamento è stato bloccato dal primo elemento web del menu. Eccetera. Di conseguenza, abbiamo ottenuto una catena seriale orizzontale di tutti i componenti del menu. Puoi vedere tu stesso tutti i dettagli. Ora proviamo a ridurre artificialmente la larghezza della finestra:
Nel caso in cui l'elemento flottante non trovi posto in alto, occupa il posto verticalmente più alto nella riga sottostante e si sposta nella posizione più a sinistra. In pratica, capita spesso che il titolo di un particolare articolo possa essere più lungo e non rientrare nei limiti standard. Se questa è la prima voce, l'intero menu potrebbe apparire così:
In questo caso, "Punto 4" considera prima il bordo più alto in alto e solo dopo si sposta nella posizione più a sinistra, ma colpisce il primo elemento web. Se l'altezza, ad esempio, del terzo elemento risulta essere maggiore, l'immagine cambia come segue:
Quindi "Punto 3" allineerà la sua posizione con il bordo inferiore dell'ultimo elemento web nella riga superiore e solo allora si sposterà a sinistra. Tutti i gesti sopra descritti dovrebbero aiutarti a capire l'essenza dell'effetto del float sulla posizione degli elementi web nella pagina.
Se nel layout pratico ci sono problemi simili, è possibile utilizzare altri metodi per creare un menu orizzontale al posto della proprietà float CSS. Tuttavia, questo è un argomento separato, sul quale ci occuperemo sicuramente in futuro.
L'effetto dell'applicazione della proprietà clear (entrambi, sinistra, destra).
Ora vediamo come sfruttare la funzionalità degli elementi mobili, ma allo stesso tempo fare in modo che i prossimi blocchi sottostanti nella pagina web tengano conto della loro posizione e dimensione. Questo può essere ottenuto con la regola chiara. Anche in questo caso, tutte le informazioni possono essere ottenute dalla fonte originale (consorzio W3C):
regola CSS clear ha quattro possibili valori, con la proprietà nessuno come predefinita, il che è del tutto naturale poiché fornisce un flusso di codice standard. Anche clear (nessuno, sinistra, destra, entrambi) viene ereditato dal tag padre (ereditare).
L'essenza di questa regola, scritta per un blocco specifico, è annullare l'azione in base al suo valore:
Non è chiaro? Vagamente e solo a intuito cogli il significato? Niente, dopo aver analizzato un esempio visivo, penso che tutto andrà a posto. Per fare ciò, impostiamo il compito: posizionare due blocchi orizzontalmente uno accanto all'altro e posizionare del testo sotto. Questo design è abbastanza comune nel layout.
Quindi, prendiamo due contenitori DIV, che schematicamente possono essere 2 colonne. Scriviamo le proprietà CSS per loro, incluso larghezza fissa(larghezza), colore di sfondo e facendoli fluttuare con float a sinistra. Aggiungiamo loro del testo, racchiuso in un tag P, che, come sai, è minuscolo:
I blocchi DIV si allineeranno in una riga orizzontale, con il primo che si spingerà il più a sinistra possibile. E il secondo parcheggerà al suo bordo destro (perché sarà la posizione a sinistra), il primo div non si sposterà ulteriormente. Ma il testo continuerà questa riga, poiché la larghezza totale lo consente:
Come capisci, in questa situazione, il nostro compito non può essere considerato completato. Innanzitutto, quando si restringe la finestra di un importo inferiore alla larghezza totale dei div, la colonna di destra salta in basso e si trova in basso a sinistra. In secondo luogo, il contenuto del terzo elemento web con testo si trova accanto e non sotto le colonne:
Ancora una volta, puoi vedere di persona come si comporteranno tutti gli elementi, restringendo ed espandendo artificialmente l'area di visualizzazione. Per eliminare le carenze descritte, aggiungiamo un contenitore con proprietà CSS e collochiamo al suo interno tutti i livelli esistenti. E aggiungi anche un DIV vuoto aggiuntivo con il CSS cancella entrambe le regole per impedire che il contenuto del blocco in basso (testo) si avvolga attorno alle colonne a destra e a sinistra:
Si noti che agli stili della grande diva I aggiunto margine della regola:0 auto, con il quale è possibile allineare il contenitore al centro. La vista risultante sarà simile a questa:
Ora il nostro compito è risolto, poiché il risultato soddisfa le condizioni impostate: due colonne si trovano in una riga orizzontale e il contenuto sotto l'elemento web (TEXT) nel codice rimarrà rigorosamente al suo posto legittimo sotto le colonne.
Quando la larghezza dell'area di visualizzazione viene ridotta, il design rimarrà nella stessa forma (in questo caso, scorrimento orizzontale), che puoi verificare andando alla pagina web corrispondente con la soluzione questo esempio. In aggiunta, guarda il video di Evgeny Popov, che fornisce un esempio di markup di una pagina Web utilizzando float e clear (eliminando il wrap around):
Le domande su come funzionano le proprietà CSS float left e float right sorgono con invidiabile regolarità. Questo diventa un argomento particolarmente dolente per i layout designer e i programmatori che da anni collezionano layout sui tavoli e ora sono costretti a lavorare con i blocchi. Inoltre, questo è esacerbato da problemi di layout cross-browser, anche se recentemente questo argomento è diventato in qualche modo meno fastidioso per gli 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 inviare a tutti coloro che ne soffrono.
Vi assicuro che non ci sarà nulla di particolarmente nuovo in questo post. Ci sono molte informazioni di questo tipo in rete. Ma ogni volta ero già stanco di mostrare un esempio sulle dita o di cercare un link a cui inviare il mio prossimo dipendente. Pertanto, qui verrà presentata una breve raccolta di ciò che incontri più spesso.
Blocchi in un contenitore con set di proprietà CSS float left e float right
Problema tipico:
Le illustrazioni seguenti mostrano un paio di questi casi.
Situazione con due o più caselle con proprietà CSS float left
Dovrebbe essere:
La situazione in cui un blocco ha la proprietà CSS fluttuante a sinistra e l'altro a destra
Dovrebbe essere:
Che aspetto ha con un layout errato:
Perché si è verificata questa situazione
I nostri blocchi CSS float left e float right si trovano all'interno di un contenitore che ha del riempimento dal basso. Nonostante apparentemente vero impostare i parametri, il rientro in basso non solo non funziona, ma anche il contenuto dei blocchi inferiori entra nel nostro blocco superiore.
Il fatto è che i blocchi con le proprietà float impostate non influiscono sull'altezza del loro contenitore.
Ad esempio: nel primo caso, tutti i blocchi all'interno del contenitore sono mobili. Pertanto, l'altezza del contenitore sarà zero.
Nel secondo caso, oltre ai blocchi mobili, abbiamo anche del testo nel contenitore. 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 alcun problema. Se non c'è abbastanza testo, come nell'esempio sopra, il contenuto dei blocchi inferiori salirà fino al bordo inferiore del contenitore.
Soluzione 1 aggiungi un blocco vuoto con la proprietà CSS chiara: entrambi
Prima del tag di chiusura del contenitore, è necessario posizionare un blocco con la proprietà clear:both CSS. Quindi il contenitore verrà esteso al blocco inferiore, poiché questa proprietà blocca l'influenza dei blocchi con la proprietà CSS float left e float right.
Esempio di codice della pagina:
Inoltre, un blocco clear:both può essere posizionato immediatamente dopo il tag di chiusura del contenitore o dopo l'ultimo blocco mobile. Il contenitore in questa situazione non cambierà le sue dimensioni. Sì e entro nell'insieme non sarà necessario, ma il clear:entrambi i blocchi ritagliano semplicemente il contenuto dai blocchi mobili.
Esempio di codice della pagina:
Tuttavia, non tutti sanno che il campo delle direzioni corrisponde al determinante del sistema di equazioni lineari, il che non sorprende. Inoltre, il determinante del sistema di equazioni lineari ripristina categoricamente il vettore, come previsto. Il quartiere del punto è ancora richiesto. Il lemma, come segue da quanto sopra, stabilizza essenzialmente le serie divergenti astratte, che senza dubbio ci condurranno alla verità. Il lemma svolge significativamente l'inconfutabile logaritmo naturale, lasceremo ulteriori calcoli agli studenti come semplici compiti a casa.
Esempio di codice CSS:
Container ( display: block; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 10px; ) .clear ( display: block !important; margin: 0px !important; padding: 0px !important; clear: entrambi !important; float: nessuno !important; altezza: 1px !important; larghezza: auto !important; )
Metodicamente - non la soluzione più elegante, anche se merita il diritto alla vita, poiché è abbastanza efficace. Un chiaro svantaggio è il fatto che dobbiamo aggiungere codice extra nel testo della pagina.
La soluzione 2 specifica esplicitamente l'altezza del contenitore
L'opzione dell'altezza del contenitore è valida solo se si conosce esattamente la dimensione del contenuto del contenitore. Quindi il nostro CSS sarà simile a questo:
Container ( display: block; height: 100px; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 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.
La soluzione 3 imposta la proprietà CSS di overflow sul contenitore
Se si imposta il valore di una proprietà del contenitore traboccare pari auto o nascosto, il browser ricostruirà il contenitore per adattarlo a tutti i float e non visualizzerà le barre di scorrimento.
Se si imposta la proprietà di overflow su valore automatico, quindi preparati al fatto che in alcune situazioni potrebbero essere ancora visualizzate le barre di scorrimento. Pertanto, dovresti controllare in modo completo il layout in diverse modalità.
Esempio di codice CSS:
Container ( display: block; overflow: auto; ) .in_block ( display: block; float: left; width: 100px; height: 100px; margin-right: 10px; )
Due caselle sullo stesso livello con le proprietà CSS float sinistra e float destra specificate
Una situazione tipica: testo che avvolge due blocchi con del contenuto. In questo caso, i blocchi si trovano ai lati del testo.
Dovrebbe essere:
Un paio di anni fa, quando gli sviluppatori hanno iniziato a spostarsi verso l'HTML senza tabelle, la proprietà float CSS ha improvvisamente assunto un ruolo molto importante. Il motivo per cui la proprietà float è diventata così comune era perché, per impostazione predefinita, gli elementi a livello di blocco non erano allineati uno accanto all'altro in un formato basato su colonne. Poiché le colonne sono richieste praticamente in ogni layout CSS, questa proprietà è stata utilizzata e persino abusata.
Proprietà galleggiante in css, consente allo sviluppatore di includere colonne simili a tabelle in Marcatura HTML senza tavoli. Se non per la proprietà galleggiante, poi gli schemi Posizionamento CSS non sarebbe possibile se non utilizzando il posizionamento assoluto e relativo, che sarebbe sciatto e renderebbe il layout ingestibile.
In questo articolo lo diremo cos'è una proprietà galleggiante e come influisce sugli elementi in contesti specifici. Daremo anche un'occhiata ad alcune delle differenze che possono sorgere con questa proprietà nei browser più comunemente usati. Infine, ne dimostreremo diversi applicazioni pratiche proprietà galleggiante. Ciò dovrebbe anche fornire una discussione completa e approfondita di questa proprietà e del suo impatto sullo sviluppo del CSS.
Definizione e sintassi della proprietà CSS Float
Lo scopo della proprietà float è spingere un elemento di blocco a sinistra oa destra rimuovendolo dal flusso del documento. Ciò consente al contenuto corrente di avvolgere naturalmente l'elemento mobile. Questo concetto è simile a quello che si vede ogni giorno nella letteratura stampata, dove si trovano fotografie e altro elementi grafici, allineato su entrambi i lati e il contenuto (solitamente testo) scorre naturalmente attorno all'elemento allineato attorno al bordo sinistro o destro.
Nell'immagine sopra, la sezione “Lettori del sito .net magazine” con 3 foto dei lettori allineate nelle loro colonne con testo che avvolge le immagini. Questa è l'idea di base alla base della proprietà float nei layout CSS e dimostra uno dei modi in cui viene utilizzata nella progettazione di tabelle.
Il potere dell'utilizzo dei galleggianti nel layout a più colonne è stato spiegato da Douglas Bowman nel 2004 nella sua classica presentazione No More Tables:
Bowman ha spiegato i principi alla base del layout tableless utilizzando un vecchio sito Microsoft come riferimento. Float è stato utilizzato in modo prominente nella sua revisione del markup fittizio da parte di Microsoft.
Sintassi
La proprietà Float può assumere uno dei 4 valori: sinistra (sinistra), destra (destra), nessun allineamento (nessuno) ed ereditato (ereditare). Questo è dichiarato come mostrato nel codice seguente:
#barra laterale ( float: sinistra; )
#barra laterale( galleggiante: sinistra; |
I valori più comunemente usati sono sinistra e destra. Valore nessuno o valore iniziale galleggiare per alcuni Elemento HTML-pagine è l'impostazione predefinita. Eredita valore(ereditare) che può essere applicato a quasi tutte le proprietà CSS non funziona tra le versioni Internet Explorer, di cui 7.
La proprietà float non richiede l'applicazione di altre proprietà a un elemento float, tuttavia, per funzionare correttamente, un float funzionerà in modo più efficiente in determinate circostanze.
In genere, un elemento mobile dovrebbe avere larghezza impostata in modo esplicito(a meno che non sia un elemento sostituito, come un'immagine). Ciò garantisce che il float si comporti come previsto e aiuta a evitare problemi in alcuni browser.
#barra laterale ( float: sinistra; larghezza: 350px; )
#barra laterale( galleggiante: sinistra; larghezza: 350px |
Caratteristiche degli elementi fluttuanti
Di seguito è riportato un elenco del comportamento degli elementi mobili, secondo la specifica CSS2:
il blocco flottante a sinistra fluttua a sinistra finché il suo bordo sinistro (o il bordo del bordo se non c'è alcun bordo) tocca il bordo del contenuto del blocco o il bordo di un altro blocco flottante
Se la dimensione del blocco flottato supera lo spazio orizzontale disponibile, il blocco flottato verrà spinto verso il basso
Gli elementi a livello di blocco non posizionati e non mobili agiscono come elementi mobili, ad es. è al di fuori del flusso del documento
I bordi di un blocco flottante non corrisponderanno ai bordi dei blocchi adiacenti
elemento radice( ) non può essere flottante
Un elemento inline, uno mobile, viene convertito in un elemento di tipo blocco
Galleggia in pratica
Il caso d'uso più comune per la proprietà float consiste nel rendere mobile un'immagine con il testo a capo. Per esempio:
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Utfelis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Il CSS applicato all'immagine nella casella sopra è simile a questo:
img ( float: sinistra; margine: 0 15px 5px 0; bordo: solido 1px #bbb; )
img( galleggiante: sinistra; margine : 0 15px 5px 0 ; bordo: solido 1px #bbb; |
L'unica proprietà che può ottenere questo effetto è la proprietà float. Le altre proprietà (margine e bordo) ci sono per ragioni estetiche. Altri elementi nel blocco (tag
Con il testo in essi) non è necessario alcuno stile.
Come accennato in precedenza, gli elementi flottanti vengono espulsi dal flusso del documento, mentre altri elementi di blocco rimangono nel flusso, agendo come se l'elemento flottante non fosse nemmeno presente. Ciò è dimostrato visivamente di seguito:
Questa casella viene spostata a sinistra
Questo
L'elemento ha un colore di sfondo diverso per mostrare che si estende per la larghezza del suo genitore, ignorando l'elemento mobile. Questo testo in linea, tuttavia, si avvolge attorno alla casella mobile.
Nell'esempio sopra
elemento a livello di blocco, quindi ignora l'elemento mobile che copre la larghezza del contenitore (meno il riempimento). Tutti gli elementi di tipo blocco non mobili si comporteranno in modo simile.
Il testo nel paragrafo è in linea, quindi si avvolge attorno all'elemento mobile. Viene fornito anche il blocco flottante parametri di margine per spostarlo fuori dal paragrafo, rendendolo visivamente pulito in modo che l'elemento paragrafo ignori il blocco mobile.
Svuotamento galleggianti
I problemi di layout con i float vengono generalmente risolti utilizzando la proprietà clear CSS, che consente di "cancellare" gli elementi float da sinistra o destra o da entrambi i lati.
Diamo un'occhiata a un esempio che si presenta spesso: un piè di pagina avvolge il lato destro di un layout a 2 cloni:
La colonna di sinistra fluttuava a sinistra
Se guardi la pagina IE6 e IE7, non vedrai alcun problema. Le colonne sinistra e destra sono a posto e il piè di pagina è in basso. Ma in Firefox, Opera, Safari e Chrome, vedrai il piè di pagina spostarsi fuori posto. Ciò è causato dall'applicazione di float alle colonne. Questo è il comportamento corretto, sebbene sia più problematico. Per risolvere questo problema, utilizziamo la proprietà clear sopra, relativa al footer:
#footer (chiaro: entrambi; )
#piè di pagina ( chiaro: entrambi; |
Il risultato è mostrato di seguito:
La colonna di sinistra fluttuava a sinistra
Anche la colonna di destra fluttuava a sinistra
La proprietà clear cancellerà solo gli elementi float, quindi l'applicazione di clear: entrambe su entrambe le colonne non causerebbe la discesa del footer, perché il footer non è un elemento float.
La proprietà clear cancellerà solo gli elementi mobili. L'uso di clear è che entrambe le colonne non ometteranno il piè di pagina perché non è un elemento mobile.
Quindi usa clear su elementi non mobili, e talvolta anche su elementi mobili, per forzare gli elementi della pagina in posizione.
Correzione del padre di abbandono
Uno dei più caratteristiche comuni markup con float, è il "genitore drop-out". Ciò è dimostrato nell'esempio seguente:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Si noti che la base dell'immagine mobile appare al di fuori del suo genitore. Il genitore non si espande completamente per contenere l'immagine mobile. Ciò è dovuto a ciò che abbiamo discusso in precedenza: l'elemento mobile è fuori dal flusso naturale del documento, sebbene tutti gli elementi di blocco siano visualizzati, ma l'elemento mobile non è presente. Questo non è un bug CSS, tutto è conforme alle specifiche CSS. Tutti i browser fanno lo stesso in questo esempio. Inutile dire che, in questo esempio, l'aggiunta di una larghezza al contenitore eviterà il problema in IE, ma dovrebbe anche risolvere il problema in Firefox, Opera, Safari o Chrome.
Soluzione 1: galleggiante per il contenitore
Il modo più semplice per risolvere questo problema è far fluttuare l'elemento genitore:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Ora il contenitore si espande per adattarsi a tutto elementi figlio. Ma sfortunatamente questa correzione funzionerà solo in numero limitato casi, poiché il genitore mobile può avere conseguenze indesiderabili per il tuo layout.
Soluzione 2: aggiunta di markup aggiuntivo
Questo è un metodo obsoleto, ma è un'opzione facile. Basta aggiungere un elemento in più sul fondo del contenitore e "cancellarlo". Ecco come apparirà il codice HTML dopo aver implementato questo metodo:
XHTML
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. |
E il CSS risultante viene applicato ai nuovi elementi:
Clearfix ( chiaro: entrambi; )
clearfix ( chiaro: entrambi; |
Puoi anche farlo con
tag con stile valido. In ogni caso, otterrai il risultato desiderato: il contenitore padre si espanderà per includere tutti i suoi figli. Ma questo metodo non è raccomandato in quanto aggiunge codice non semantico al tuo markup.
Soluzione 3: pseudoelemento dopo
Lo pseudo-elemento :after aggiunge un elemento alla pagina HTML sottoposta a rendering. Questa tecnica è stata ampiamente utilizzata per risolvere problemi di float clearing. Ecco come appare il CSS:
Clearfix:after ( contenuto: "."; display: blocco; altezza: 0; cancella: entrambi; visibilità: nascosta; )
Clearfix:dopo ( contenuto : "." ; blocco di visualizzazione ; altezza: 0 chiaro: entrambi; visibilità: nascosta; |
La classe CSS "clearfix" si applica a qualsiasi contenitore che ha figli float e non si espande per includerli.
Ma questo metodo non funziona per Internet Explorer prima della versione 7, quindi per IE è necessario applicare una delle seguenti opzioni:
Clearfix ( display: blocco in linea; ) .clearfix ( zoom: 1; )
clearfix ( display : blocco in linea ; clearfix ( zoom: 1; |
A seconda del tipo di problema, hai a che fare con una delle due soluzioni che risolveranno questo problema in Internet Explorer. Va notato che la proprietà zoom non è uno standard di proprietà Microsoft e quindi il tuo CSS non sarà valido.
Poiché lo pseudo-elemento :after non funziona in IE6/7, il codice è un po' gonfio e complicato ed è necessario uno stile aggiuntivo solo per IE, quindi questa soluzione non lo è il modo migliore, ma probabilmente il migliore che abbiamo visto finora.
Soluzione 4: proprietà di overflow
Di gran lunga il modo migliore e più semplice per risolvere il problema dell'abbandono del genitore è aggiungere overflow: hidden o overflow: auto all'elemento genitore. È chiaro, facile da mantenere, funziona in quasi tutti i browser e non aggiunge alcun markup aggiuntivo.
Nota che ho detto "quasi" in tutti i browser. Questo perché non funziona in IE6. Ma, in molti casi, il contenitore padre avrà una larghezza impostata, che risolve il problema in IE6. Se il contenitore padre non ha una larghezza, puoi aggiungere uno stile solo IE6 con il codice seguente:
// Questa correzione è solo per IE6 .clearfix ( altezza: 1%; overflow: visibile; )
// Questa correzione è solo per IE6 clearfix ( altezza : 1% troppopieno: visibile |
In IE6, la proprietà height viene erroneamente trattata come min-height, costringendo così il contenitore a includere i suoi figli. La proprietà Overflow viene quindi reimpostata su "visibile" per garantire che il contenuto non sia nascosto o fatto scorrere.
L'unico aspetto negativo dell'utilizzo del metodo di overflow (in qualsiasi browser) è la possibilità che il contenuto dell'elemento abbia barre di scorrimento o nasconda il contenuto. Se ci sono elementi con margini negativi o posizionati in modo assoluto nel genitore, saranno nascosti se escono dal genitore, quindi questo metodo dovrebbe essere usato con attenzione. Va inoltre notato che se l'elemento contenuto avesse un'altezza o un'altezza minima specificata, non saresti assolutamente in grado di utilizzare il metodo di overflow.
Quindi non è davvero facile risolvere su più browser questo problema. Ma quasi tutti i problemi di compensazione del float possono essere risolti con uno dei metodi sopra.
Errori float correlati in Internet Explorer
Nel corso degli anni sono stati pubblicati numerosi articoli di discussione online errori comuni relativo a galleggiare markup CSS. Tutti, non a caso, affrontano problemi specifici di Internet Explorer. Di seguito, troverai un elenco di collegamenti a una serie di articoli che discutono di problemi relativi al float:
Modifica della proprietà float con JavaScript
Per modificare un valore CSS in JavaScript, devi accedere allo stile dell'oggetto convertendo la proprietà CSS prevista in un "caso cammello". Ad esempio, la proprietà CSS "margin-left" diventa marginLeft, la proprietà background-color diventa BackgroundColor e così su. Ma con la proprietà float, le cose sono diverse perché la parola float è già riservata in JavaScript. Pertanto, quanto segue sarebbe errato:
stile. styleFloat = "sinistra" ;
// Per tutti gli altri browser
mioDiv. stile. cssFloat = "sinistra" ;
Uso pratico di Float
I float possono essere utilizzati per eseguire un'ampia gamma di attività nel layout CSS. Alcuni esempi sono descritti qui.
2 colonne, larghezza fissa
3 colonne, layout ad altezza uguale
Immagine flottante con titolo.
Simile a quanto discusso in precedenza in Float in Practice, Max Design descrive come un'immagine float con un titolo consente al testo di avvolgersi naturalmente attorno ad essa.
Navigazione orizzontale con liste non ordinate
La proprietà float è un componente chiave nella codifica delle barre di navigazione orizzontali basate su sprite. Chris Spooner di Line25 descrive come creare un Menu of Awesomeness con i tag
