Ultimo aggiornamento: 21/04/2016

In genere, tutti i blocchi e gli elementi di una pagina Web vengono visualizzati nel browser nell'ordine in cui sono definiti nel codice html. Tuttavia, i CSS forniscono una speciale proprietà float che ci consente di impostare gli elementi su float, in modo da poter creare pagine web più interessanti e varie nel loro design.

Questa proprietà può assumere uno dei seguenti valori:

sinistra: l'elemento si sposta a sinistra e tutto il contenuto che va sotto si avvolge attorno al bordo destro dell'elemento

destra: l'elemento si sposta a destra

none: annulla l'avvolgimento e riporta l'oggetto nella sua posizione normale

Quando si utilizza la proprietà float su elementi diversi dall'elemento img a cui applicare lo stile, si consiglia di impostare la proprietà width.

Immaginiamo quindi di dover visualizzare un'immagine sulla pagina a sinistra del testo principale, una barra laterale a destra e il resto dello spazio dovrebbe essere occupato dal testo principale dell'articolo. Definiamo innanzitutto l'interfaccia della pagina senza la proprietà float:

In questo caso, otterremo un posizionamento sequenziale degli elementi nella pagina:

Ora nella stessa pagina applicheremo la proprietà float, modificando gli stili come segue:

Immagine ( float:left; /* float left */ margin:10px; margin-top:0px; ) .sidebar( border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin- sinistra: 10px; dimensione carattere: 20px; float: destra; /* float destra */ )

Il posizionamento degli elementi sulla pagina cambierà di conseguenza:

Gli elementi a cui viene applicata la proprietà float sono anche chiamati elementi flottanti.

Nessun flusso in giro. proprietà chiara

A volte diventa necessario vietare i flussi. Un'attività simile può essere rilevante se alcuni blocchi devono essere spostati su una nuova riga e non avvolgersi attorno a un elemento mobile. Ad esempio, il piè di pagina, di regola, dovrebbe essere posizionato rigorosamente in basso e estendersi su tutta la larghezza della pagina. Se c'è un elemento mobile davanti al piè di pagina, il piè di pagina potrebbe scorrere attorno a questo elemento, il che non è auspicabile.

Per impedire il ritorno a capo degli elementi, i CSS utilizzano la proprietà clear, che dice al browser che all'elemento a cui si sta applicando lo stile non dovrebbe essere applicato il ritorno a capo.

La proprietà clear può assumere i seguenti valori:

sinistra: l'elemento con stile può avvolgere l'elemento flottato a destra. A sinistra il flusso non funziona

destra: l'elemento con stile può fluttuare solo a sinistra di un elemento fluttuato. E a destra il flusso non funziona

entrambi: l'elemento con stile può avvolgersi attorno agli elementi fluttuanti e spostarsi verso il basso rispetto ad essi

none: l'elemento stilizzato si comporta in modo standard, cioè partecipa al flusso destro e sinistro

Ad esempio, supponiamo che su una pagina Web sia definito un piè di pagina:

La presenza di un ritorno a capo creerà una visualizzazione errata in cui il piè di pagina si sposta verso l'alto:

Cambiamo lo stile del piè di pagina:

Piè di pagina (bordo superiore: 1px solido #ccc; chiaro: entrambi;)

Ora il piè di pagina non scorrerà attorno all'immagine, ma scenderà.

In questo tutorial tratteremo un argomento molto importante, ovvero il flusso di un documento HTML, nonché i modi per controllarlo utilizzando le proprietà CSS float e clear.

Sequenza di visualizzazione degli elementi HTML

Per impostazione predefinita, un documento HTML viene disegnato dall'alto verso il basso, dal bordo superiore della finestra del browser verso il bordo inferiore. Questo è anche l'ordine in cui appaiono gli elementi di una pagina web. L'ordine di output è chiamato flusso di documenti.

Lo screenshot seguente è un esempio dell'ordine standard per la visualizzazione degli elementi:

Esistono diversi strumenti nei CSS per controllare questo flusso. Ad esempio, puoi impostare il flusso degli elementi e anche estrarli dal flusso generale. Uno di questi strumenti, la proprietà float, verrà discusso ulteriormente.

Galleggiante CSS

Un elemento a cui è applicata la proprietà float viene spinto sul bordo sinistro o destro dell'elemento genitore (a seconda del valore specificato) e tutti gli elementi sottostanti vengono sollevati e sembrano avvolgersi attorno all'elemento. Per capire meglio, immagina una pietra che scorre intorno all'acqua. In realtà è per questo motivo che tali elementi vengono anche detti “fluttuanti”.

Questa proprietà è ampiamente utilizzata nel layout, quindi è molto importante capire come funziona. Float viene utilizzato per creare layout multicolonna, menu di navigazione, gallerie e altro.

Vediamo i valori che può assumere la proprietà float. Ce ne sono solo tre:

• sinistra: l'elemento è allineato a sinistra. Gli elementi più in basso nel flusso gli scorrono attorno sul lato destro.
• destra - il valore opposto a quello precedente. L'elemento è allineato al lato destro e gli elementi inferiori nel flusso scorrono attorno ad esso verso sinistra lungo il bordo sinistro.
• none: l'elemento non si avvolge e si trova nella sua posizione normale.

Come accennato, un elemento con la proprietà float viene reso mobile a sinistra o a destra dell'elemento genitore. Può essere il contenitore principale della pagina web o un piccolo blocco, ad esempio una barra laterale.

Questa proprietà può essere applicata sia agli elementi in linea che a quelli a blocco. Ma poiché un elemento blocco per impostazione predefinita occupa l'intera larghezza del contenitore, quando si utilizza un float con un blocco, si consiglia di dargli una larghezza di larghezza e quindi lasciare spazio al contenuto che deve aggirare l'elemento. In altre parole, è necessario consentire all'acqua di scorrere attorno alla pietra e non bloccarne il flusso.

Di seguito è riportato un esempio visivo di come funziona la proprietà float con i valori left e right:

Come puoi vedere, i CSS ti consentono di creare rapidamente e facilmente un layout a più colonne utilizzando solo due proprietà in coppia: float e width . Ed è ancora più semplice impostare il testo da avvolgere attorno a un'immagine: abbiamo semplicemente applicato ad essa la proprietà float:right.

Scartare: proprietà chiara

Nel layout c'è quasi sempre la necessità di reimpostare il flusso dopo un determinato elemento. Ad esempio, nel caso in cui il blocco principale di una pagina web sia avvolto attorno ad una colonna laterale (sidebar), molto probabilmente dovremo scartarlo dopo la sidebar. Dopotutto, questo non è sicuramente l'ultimo elemento della pagina e, come minimo, c'è anche un piè di pagina: la parte inferiore della pagina, il "piè di pagina", che dovrebbe trovarsi in fondo, non spostarsi da nessuna parte e non avvolgere nulla.

Ora nello screenshot, l'avvolgimento dopo la barra laterale non viene annullato e il piè di pagina del blocco si comporta in modo strano, cercando di avvolgere l'elemento sopra (ma non succede nulla, poiché la larghezza di almeno un elemento non lo consente - l'elemento ottiene " incollato"):

Come ripristinare l'avvolgimento? La proprietà chiara e i suoi valori ci aiuteranno in questo:

• left - un elemento a cui è applicata la proprietà clear:left non fluttua più attorno all'elemento con la proprietà float:left, ma viene mantenuto il float destro.
• right - un elemento a cui è applicata la proprietà clear:right smette di scorrere attorno all'elemento con la proprietà float:right, ma rimane il flusso a sinistra.
• entrambi: annulla completamente l'avvolgimento su tutti i lati. L'elemento si sposta verso il basso e forma un flusso standard. Anche il flusso attorno agli elementi che lo seguono cessa di influenzare.
• none: annulla la cancellazione. L'elemento si comporterà come al solito e sarà influenzato dalle impostazioni del float.

Usiamo ciò che abbiamo imparato e impostiamo il nostro piè di pagina su clear:both:

Di conseguenza, il piè di pagina è stato livellato e posizionato al suo posto. A proposito, è diventato visibile anche il risultato della proprietà margin-bottom:10px, precedentemente applicata alla barra laterale.

Supporto del browser

Le proprietà float e clear sono supportate da tutti i browser in uso, inclusi IE6 e IE7.

Se utilizzato correttamente, float si trasforma in un potente strumento di layout utilizzato per allineare e organizzare gli elementi. Tuttavia, per tenere sotto controllo questo attrezzo, è necessario un contrappeso, senza il quale le enormi potenzialità del galleggiante si riducono a un paio di compiti ristretti. Stiamo parlando di annullare il flusso utilizzando metodi diversi. Elenchiamo alcuni di quelli più popolari.

Larghezza degli elementi

Se gli elementi flottati occupano l'intera larghezza disponibile, gli elementi rimanenti che li seguono inizieranno su una nuova riga. Per fare ciò, la larghezza totale degli elementi deve essere pari al 100%. L'esempio 1 mostra come creare frecce su una riga.

Esempio 1: utilizzo della larghezza

Ogni blocco con una freccia ora occupa il 50% della larghezza e la somma arriva al 100%, quindi il paragrafo dopo la freccia inizia su una nuova riga.

Questo metodo viene utilizzato raramente, poiché non è sempre possibile specificare esplicitamente la larghezza degli elementi e il metodo non risolve il problema con l'altezza del blocco e il suo sfondo (Fig. 1).

Riso. 1. Nessun riempimento dello sfondo

Utilizzo dell'overflow

Galleggiante di pulizia 2

Creare una pagina web come mostrato in Fig. 1. Per denotare il rublo, utilizzare il simbolo ₽.

Mostra la risposta

Il tuo ordine

Prodotto

Prezzo

maglietta

599 rupie

Pantaloncini

299 ₽

Totale

898 RUR

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 apparirà 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), sarebbe lo stesso dell'esempio precedente di 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.

In questo articolo ho deciso di analizzare un problema che a volte si verifica durante il layout e allo stesso tempo è molto difficile trovare una soluzione su Internet. In questo articolo analizzeremo il problema cancellazione parziale del float nei CSS, e ti mostrerò anche la sua soluzione.

Quindi, diamo un'occhiata a questo codice:

Blocchi di sinistra

Testo dell'articolo

#Sinistra (
bordo destro: 5px solido #000;
galleggiante: sinistra;
altezza: 400px;
larghezza: 200px;
}
#Giusto (
margine sinistro: 220px;
}
#immagine giusta (
galleggiante: sinistra;
}

Qual era il nostro compito? Fare 2 colonne: la colonna di sinistra ha del contenuto, la colonna di destra ha un articolo. E questo articolo ha una foto con galleggiante: sinistra;(uguale al blocco di sinistra). Successivamente vogliamo visualizzare un blocco con le informazioni sull'articolo, ovviamente non vogliamo che queste informazioni siano a destra dell'immagine. Pertanto aggiungiamo blocco chiaro. Qui però ci aspetta una sorpresa.

Non solo è stato cancellato galleggiante: sinistra; vicino all'immagine, ma anche vicino al blocco di sinistra. Pertanto, le informazioni sull'articolo sono scese, allineandosi con il bordo inferiore del blocco sinistro (poiché è più alto). Come risolvere questo problema? Molto semplice, solo un isolato #Giusto aggiungere proprietà traboccare:

#Giusto (
margine sinistro: 220px;
overflow: nascosto;
}

Ora tutto è andato a posto. Proprietà traboccareè responsabile della visualizzazione di ciò che è fuori dal blocco. E nascosto afferma che verrà visualizzato solo ciò che è all'interno del blocco e tutto il resto sarà nascosto. È questa proprietà e valore che ci consente di risolvere il problema cancellazione parziale del float nei CSS.