Posizionare elementi con aiuto di proprieta float in CSS
Uno dei modi per posizionare gli elementi in una pagina web è di usare la proprietà float. Questa proprietà è abbastanza universale e può essere applicata in diversi modi. In sostanza, la proprietà float prende un elemento lo rimuove dal normale flusso di elementi nel DOM della pagina e lo posiziona a sinistra o a destra dell'elemento padre. Tutti gli altri elementi della pagina scorreranno sui lati liberi di tale elemento. Ad esempio un paragrafo risalirà e scorrerà sul lato liber del elemento <img> per esempio, se per <img> è impostata la proprietà float.
Quando la proprietà float viene applicata a più elementi contemporaneamente, questo consente di creare un layout con elementi situati l'uno accanto all'altro, come mostrato nel layout a più colonne. La proprietà float puo assumere diversi valori i due più popolari sono left e right, che consentono ad elemento di essere posizionato a sinistra o a destra del suo genitore.
Come si scrive:
Float in pratica
Creiamo un layout comune di una pagina con un'intestazione in alto, due colonne al centro e un blocco in basso. Idealmente, questa pagina dovrebbe essere creata usando gli elementi <header>, <section>, <aside> e <footer> all'interno dell'elemento <body> markup l'HTML potrebbe apparire cosi:
Dimostrazione del loyuat
<header>
<section>
Qui, gli elementi <section> e <aside> sono elementi block quindi vengono posizionati uno sopra l'altro per impostazione predefinita. Tuttavia, noi vogliamo che questi elementi si trovino fianco a fianco. Impostando float per <section> come left, e per <aside> come right, possiamo posizionarli in due colonne l'uno al finaco del altro. Il nostri stili CSS saranno cosi :
Per riferimento, gli elementi flottanti vengono posizionati lungo il bordo dell'elemento padre. Se non v'è nessun genitore, allora elemento con la proprietà float sarà situato sul bordo della pagina. Quando creiamo un elemento flottante, esso vine rimosso dal normale flusso del documento HTML. Questo porta al fatto che la larghezza dell'elemento cambia e la sua larghezza diventa uguale alla larghezza del suo contenuto.
A volte, ad esempio quando si crea una bozza della pagina che sara riutilizzata tante volte nel futuro, questo comportamento è indesiderabile. Questo può essere corretto aggiungendo width con un valore fisso per ogni colonna. A parte questo per evitare che elelmenti flottanti si tocchino essendo posizionati uno a fianco all'altro, possiamo utilizzare la proprietà margin per impostare lo spazio libero tra gli elementi.
Qui sotto vediamo di allargare i blocchi precedenti aggiungendo ad esso la larghezza e margin per ogni colonna per formattare meglio il nostro risultato desiderato.
Vediamo il risultato
<header>
<section>
Proprieta float può cambiare il valore display di un elemento
Per un elemento flotante, è importante di capire che questo elemento viene rimosso dal normale flusso sulla pagine e che applicazione della proprietà float può cambiare la sua proprietà display . Il funzionamento della proprietà float si basa sul fatto che per un elemento è impostata valore display:block come valore predefinito anche se non è indicato in chiaro e quindi esso occupa tutta la riga intera sulla pagina web e non permette ad altri elementi risalire nella stessa riga
Un altra situazione, un elemento il cui display è specificato come inline, come per esempio un <span> ignora qualsiasi proprietà di altezza o larghezza. Tuttavia, se si specifica float per un elemento del genere il suo comportamento cambierà e il suo valore display diventera block, e come conseguenza potrà gia assumere valori di una certa larghezza e altezza. Quindi applicando proprietà float ad un elemento dobbiamo sempre controllare come questo influisce sul suo valore della proprietà display.
Scopri di piu gaurdando anche il nostro videotutorial
Per due colonne per metterli al fianco e sulla stessa riga posiamo usare proprieta float , per una colonna come left e per altra come right, ma per fare la stessa cosa per diverse colonne dovremo cambiare il nostro approccio. Ad esempio, vorremmo ottenere una riga con tre colonne tra i nostri elementi <header> e <footer>. Se scartiamo il nostro elemento <aside> e usiamo i tre elementi <section>, il nostro markup html sara cosi :
Per posizionare questi tre elementi <section> in una fila di tre colonne, dobbiamo impostare float per tutti gli elementi <section> come left. Inoltre dobbiamo regolare la larghezza della <section> tenendo in considerazione anche altre colone presenti (che lo spazio in disposizione sara sufficiente per distribuzione di colonne con i nostri valori di larghezza indicati )
Qui sotto abbiamo tre colonne, tutte con lo stesso valore di larghezza e margin e anche con float impostato a left.
<header>
<section>
float: left; width: 30%;<section>
float: left; width: 30%;<section>
float: left; width: 30%;
Particolarità della proprietà float
La proprietà float è stata inizialmente progettata per consentire al contenuto di risalire al fianco di una immagine. Per una immagine è possibile specificare proprietà float e il contenuto sottostante risalirà e occuperà lo spazio opposto rispetto valore indicato per float Anche se questo funziona perfettamente per le immagini, la proprietà float non era inizialmente pensata per l'uso nel layout e per scopi di posizionamento e quindi possiede diverse trappole.
Una di queste trappole è che a volte gli stili applicati ad elemento flottante non vengono rispettati . Quando un elemento diventa flottante , allora viene rimosso dal normale flusso delle pagina e di conseguenza gli stili di elementi attorno a questo elemento flottante possono essere influenzati negativamente. Spesso i valori delle proprietà margin e padding sono interpretati in modo errato, causandone l'unione con l'elemento che lo affianca.
Un altro trappola è che il contenuto sottostante cerca di occupare tutto lo spazio libero che si e creato al fianco del elemento flottante che in certi occasioni non e indesiderato.
Nel precedente esempio a due colonne, dopo aver aggiunto proprietà float agli elementi <section> e <aside>, ma prima che indichiamo width l'elemento <footer> si ritroverà tra i due elementi flottanti sopra di esso, riempiendo tutto lo spazio disponibile. Cio è l'elemento <footer> si sposta nello spazio libero tra gli elementi <section> e <aside>, riempendo lo spazio libero che si e creato.
<header>
<section>
float: left; nessuna larghezza indicata
Per impedire una situazioni del genere dobbiamo creare una specia di barriera e riportare ordine nel flusso degli elementi sulla pagina. Vediamo come creare questa barriera e cancellare diciamo funzionamento della proprietà float sulla pagina.
Creare una barriera dopo elementi flottanti
Aria di funzionamento della proprietà float viene cancellata tramite la proprietà clear, che puo assumere diversi valori: i valori più comunemente usati sono left, right e both.
Il valore left cancella float sulla sinistra, mentre il valore right cancella sulla destra. Il valore both tuttavia, cancella effetto di float sulla destra e sulla sinistra ed è spesso l'opzione più ideale. Tornando al nostro esempio precedente, se usiamo la proprietà clear con both per l'elemento <footer>, possiamo cancellare effetto di float. È importante che la pulizia della riga sia applicata all'elemento specificato (di solito viene creato un div senza contenuto che svolge funzione di una barriera per elementi sottostanti ) dopo gli elementi flottanti e non prima per riportare la pagina al suo normale flusso.
Dimostrazione di un layout basato sul float e con utilizzo di clear:both
<header>
<section>
float: left; width: 63%;
Il contenuto del elemento flottante
Invece di ripulire effetto del float, un'altra opzione è quella di impostare il contenuto come clear. Il risultato sarà quasi lo stesso, ma in questo caso si garantisce veramente che tutti i nostri stili prescritti verranno visualizzati in modo appropriato. Per usare questo metodo, gli elementi flottanti con la proprietà float devono trovarsi all'interno dell'elemento genitore, che sara da contenitore, asicurando il flusso del DOM oltre i suoi bordi completamente normale. Vediamo di usare una classe che chiameremo gruppo per darli un significato abbastanza chiaro e al suo interno raggruppiamo i nostri elementi flottanti.
Vediamo un puo di capire cosa significa ogni riga del codice scritto. In sostanza applicando alla nostra classe group clear:both abbiamo impedito ai elementi successivi di risalire e occupare lo spazio libero al fianco dei elementi flottanti
In particolare, gli pseudo-elementi :: before e :: after, come descritto qui, generano dinamicamente gli elementi sopra e sotto elemento con la classe group. Questi elementi non includono alcun contenuto ( indicato come content: "";) e vengono visualizzati come elementi della tabella ( display: table;), e quindi sono elementi di blocco. Elemento generato dinamicamente (con la pseudoclasse :after ) dopo l'elemento con la classe group cancella il float all'interno del contenitore con la classe group, proprio come il clear in precedenza.
Infine, elemento con la classe group e con la sua proprietà clear:both cancella qualsiasi altri inconvenienze legati alla proprietà float che potrebbero aver luogo prima di esso per esempio elementi con float right e left separati . Vediamo che c'è più codice qui rispetto piu chiaro e corto clear: both ma può essere molto utile.
Applicando il concetto appena descritto al nostro layout di pagina a due colonne, posiamo racchiudere <section> e <aside> in un elemento genitore. Questo elemento padre conterrà e gestira gli elementi flottanti . E il nostro codice sarà simile a questo:
<header>
<section="group">
<section>
float: left;
La tecnica mostrata qui è nota come "clearfix" e la puoi trova spesso su altri siti con il nome della classe clearfix, clr o cf. Nel nostro esempio abbiamo deciso di utilizzare il nome della classe group perché rappresenta un gruppo di elementi ed esprime meglio il concetto.
Quando per gli elementi si utilizza la proprieta float è importante di tenere conto di come essi influenzano sul flusso di elementi della pagina e assicurarsi che il flusso della pagina venga ripristinato o inserendo semplicemente un elemento vuoto come clear: both;o attraverso il blocco contenitore sempre con la stessa proprietà la interno. Altrimenti ricerche dei elementi flottanti o le cause della rottura del disegno della vostra pagina potrebbe far venire parechio mal di testa specialmente su pagine con contenenti a più righe, ciascuna con diverse colonne.
E come conclusione ti riporto un frammento del codice di un fail di CMS Joomla che visualizza articolo in K2
In questo frammento quello che ci interessa e la terzultima riga dove abbiamo un <div class="clr"></div> che serve proprio per ripulire effetto dei elementi flottanti e ristabilire il flusso normale di elementi in seguito. Chi utilizza K2 di Joomla potra capire che questo framento si riferisce ad aseniazione del raitig con le stelette ad un articolo.
.