{"id":154,"date":"2011-03-22T09:12:09","date_gmt":"2011-03-22T08:12:09","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/uso-di-float-in-css\/"},"modified":"2011-03-22T09:12:09","modified_gmt":"2011-03-22T08:12:09","slug":"uso-di-float-in-css","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/uso-di-float-in-css\/","title":{"rendered":"Uso di float in CSS"},"content":{"rendered":"

La propriet\u00e0 float \u00e8 una risorsa molto utile e potente a disposizione dei web designer\/developer che lavorano con HTML e CSS. Purtroppo per\u00f2, pu\u00f2 anche causare frustrazione e confusione se non si comprende appieno il suo funzionamento. Inoltre, in passato, il float \u00e8 stato associato a dei bug dei browser piuttosto seri, quindi \u00e8 normale essere nervosi quando lo si usa nelle regole del proprio CSS. Ma calmiamoci e liberiamoci dalla frustrazione: vi mostrer\u00f2 come si comporta la propriet\u00e0 float applicata agli elementi e quanto sia incredibilmente utile una volta che la si padroneggia.<\/p>\n

Nel mondo della stampa vediamo dei float ogniqualvolta leggiamo un articolo in un magazine in cui vi sia un’immagine sulla sinistra o sulla destra con del testo tutto intorno ad essa. Nel mondo di HTML\/CSS, il testo \u201cavvolge\u201d un’immagine pi\u00f9 o meno come in un layout per magazine solo se a questa viene applicata la propriet\u00e0 float. Le immagini sono solo uno dei molti casi d’uso per la propriet\u00e0 float: possiamo ottenere mediante float anche il noto layout a due colonne. In effetti, potete applicare il float praticamente a qualunque elemento nel vostro HTML. Conoscendo e comprendendo le basi della propriet\u00e0 float, insieme ai fondamenti del posizionamento<\/a>, sarete in grado di ottenere qualunque layout con sicurezza.<\/p>\n

\n

La definizione<\/h2>\n

Cominciamo dalla definizione di float data dal W3C<\/a>:<\/p>\n

\n

Un float \u00e8 un elemento che viene spostato a sinistra o a destra sulla riga corrente. La caratteristica pi\u00f9 importante di un float (o di un elemento a cui \u00e8 applicato il float) \u00e8 che il contenuto pu\u00f2 scorrergli lungo il bordo (oppure si pu\u00f2 impedire che ci\u00f2 avvenga utilizzando la propriet\u00e0 \u201cclear\u201d). Il contenuto scorre lungo il lato destro di un elemento con float impostato a left e lungo il lato sinistro di un elemento con float impostato a right.<\/p>\n<\/blockquote>\n

Alla propriet\u00e0 float si possono applicare quattro valori: left<\/code>, right<\/code>, inherit<\/code> e none<\/code>. Ciascuno di questi valori \u00e8 auto-esplicativo. Ad esempio, se assegnate float: left<\/code> ad un elemento, questo si sposter\u00e0 sul lato pi\u00f9 a sinistra del suo elemento padre. La stessa idea si applica a float: right<\/code>: l’elemento verr\u00e0 mandato sul lato pi\u00f9 a destra del suo elemento padre. Il valore inherit<\/code> dice all’elemento a cui \u00e8 applicato di ereditare il valore di float del suo elemento padre. Il valore none<\/code> \u00e8 il valore di default e dice all’elemento di non spostarsi sotto l’effetto del float.<\/p>\n

Ecco un semplice esempio come quello citato prima del magazine, Esempio A<\/a> ed il relativo markup:<\/p>\n

 \nimg { \n  float: right;\n  margin: 10px;\n}\n<\/code><\/pre>\n<\/div>\n
\n
Il comportamento del float<\/h2>\n
Niente di troppo complesso, ma tutto sommato abbastanza bello, no? Un gioco da ragazzi, mi dite. Ok, ben prima di entrare nella parte in cui i float ci aprono la porta di un mondo popolato da unicorni amanti del bacon, facciamo un attimo retromarcia e parliamo di quello che stiamo effettivamente sperimentando. Nel mondo del web, il nostro HTML deve sottostare ad alcune regole, in particolare al flusso normale<\/a>. Nel flusso normale, ogni elemento di tipo block (div<\/code>, p<\/code>, h1<\/code>, etc.) si impila sopra l’altro verticalmente, dall’alto della viewport verso il basso. Gli elementi a cui \u00e8 applicato il float vengono prima disposti in accordo con il flusso normale e poi tolti dal flusso normale e mandati nella parte pi\u00f9 a destra o pi\u00f9 a sinistra (a seconda del valore applicato) dell’elemento padre. In altre parole, passano dall’essere uno sopra all’altro ad uno di fianco all’altro, purch\u00e9 vi sia spazio sufficiente nell’elemento padre perch\u00e9 ogni elemento a cui \u00e8 applicato il float vi trovi spazio. Questo comportamento \u00e8 cruciale e va tenuto a mente quando si creano siti web.<\/p>\n
Diamo un’occhiata a qualche altro esempio. Nell’Esempio B<\/a>, ci sono tre  blocchi a cui non \u00e8 applicata la propriet\u00e0 float:<\/p>\n
 \n.block { \n  width: 200px;\n  height: 200px;\n}\n<\/code><\/pre>\n
Vedete come si impilano uno sull’altro? Questo \u00e8 il concetto base di flusso normale<\/em>. Ecco ora lo stesso esempio con il float applicato agli elementi block, Esempio C<\/a>:<\/p>\n
 \n.block { \n  float: left;\n  width: 200px;\n  height: 200px;\n} \n<\/code><\/pre>\n
Ora i blocchi sono uno accanto all’altro. Ottimo, abbiamo capito come si fa. Ma cosa succede se non c’\u00e8 abbastanza spazio nell’elemento padre perch\u00e9 tutti i blocchi stiano uno accanto all’altro? Pensavo non me l’avreste mai chiesto. Prendiamo il nostro ultimo esempio ed aumentiamo il numero di elementi di cinque volte. L’elemento padre in questo esempio \u00e8 il body del nostro documento. Notate che a seconda della dimensione della finestra del browser (e di conseguenza dell’elemento padre body<\/code>), i blocchi scendono su una seconda riga, perch\u00e9 non c’\u00e8 abbastanza spazio per tutti loro per disporsi uno accanto all’altro. Man mano che ridimensionate la finestra del vostro browser per avere pi\u00f9 spazio, vedrete i blocchi riposizionarsi. Provateci nell’Esempio D<\/a>.<\/p>\n<\/div>\n
\n
Al sicuro<\/h2>\n
La propriet\u00e0 float<\/code> ha un fratellastro, clear<\/code>. I due si complementano in maniera da rendervi programmatori felici. Come ricorderete, un elemento a cui \u00e8 applicato il float \u00e8 prima disposto secondo il flusso normale e poi rimosso da quello. Questo significa che ogni elemento che segue un elemento a cui \u00e8 applicato il float si comporter\u00e0 in maniera contraria alle aspettative. Qui \u00e8 dove sospetto che potremmo cominciare a metterci nei pasticci. Diamo di nuovo un’occhiata ad un rapido esempio con i nostri blocchi: nell’Esempio E<\/a>, applicher\u00f2 il float a due blocchi (rosa e azzurro) e subito dopo questi, non<\/em> applicher\u00f2 il float agli altri due blocchi (verde ed arancio). Qui di seguito il codice HTML e CSS per l’Example E<\/a>:<\/p>\n
 \n<div class=\"block pink float\"><\/div>\n<div class=\"block blue float\"><\/div>\n<div class=\"block green\"><\/div>\n<div class=\"block orange\"><\/div>\n \n.block {\n  width: 200px;\n  height: 200px;\n}\n.float { float: left; }\n.pink { background: #ee3e64; }\n.blue { background: #44accf; }\n.green { background: #b7d84b; }\n.orange { background: #E2A741; }\n<\/code><\/pre>\n
Vi piace il blocco verde? Ma… un attimo! Dov’\u00e8 il blocco verde? C’\u00e8, proprio sotto al blocco rosa. La propriet\u00e0 float \u00e8 applicata sia al blocco rosa sia a quello azzurro e si comportano come ci aspetteremmo: posizionandosi uno accanto all’altro. Tuttavia, dal momento che sono stati rimossi dal flusso normale, i blocchi arancio e verde si comportano come se non ci fossero nemmeno: questo \u00e8 il motivo per cui sotto al nostro blocco rosa \u00e8 nascosto quello verde. Come rendiamo di nuovo visibile il nostro blocco verde? Utilizzando la propriet\u00e0 clear<\/code>.<\/p>\n
La propriet\u00e0 clear<\/code> ha cinque valori disponibili: left<\/code>, right<\/code>, both<\/code>, inherit<\/code> e none<\/code>. Assegnare il valore left<\/code> vuol dire che il bordo superiore di questo elemento deve stare sotto ogni elemento a cui \u00e8 applicata la propriet\u00e0 float: left<\/code>. Lo stesso concetto si applica per il valore right<\/code>: l’elemento deve posizionarsi sotto a tutti gli elementi a cui \u00e8 applicata la propriet\u00e0 float: right<\/code>. Utilizzando il valore both<\/code> si dice all’elemento che il suo bordo superiore deve stare sotto ad ogni elemento a cui \u00e8 applicata la propriet\u00e0 left o right. Il valore inherit<\/code> eredita la propriet\u00e0 clear<\/code> dal suo elemento padre, mentre il valore di default none<\/code> si comporta come ci aspetteremmo. Armati di queste nozioni, prendiamo in considerazione l’Esempio E2<\/a>. Questa volta applicheremo il clear ai due elementi a cui \u00e8 applicato il float utilizzando la propriet\u00e0 clear<\/code> sul nostro blocco verde. Il nostro codice, leggermente modificato, diventa:<\/p>\n
 \n<div class=\"block pink float\"><\/div>\n<div class=\"block blue float\"><\/div>\n<div class=\"block green clear\"><\/div>\n<div class=\"block orange\"><\/div>\n \n.block {\n  width: 200px;\n  height: 200px;\n}\n \n.float { float: left; }\n.clear { clear: left; }\n.pink { background: #ee3e64; }\n.blue { background: #44accf; }\n.green { background: #b7d84b; }\n.orange { background: #E2A741; }\n<\/code><\/pre>\n
Assegnando il valore clear: left<\/code> al nostro blocco verde, gli abbiamo detto di comportarsi come se il blocco rosa fosse nel flusso normale del nostro documento (sebbene ne sia stato in realt\u00e0 rimosso) e di posizionarsi sotto ad esso. Si tratta di una propriet\u00e0 estremamente potente: come potete vedere, aiuta a portare gli elementi a cui non \u00e8 applicato un float all’interno del flusso normale, un comportamento che ci aspetteremmo di default. Detto ci\u00f2, conoscere e comprendere sia la propriet\u00e0 float<\/code> sia clear<\/code>, apre le porte alla creativit\u00e0 per il vostro HTML e CSS.<\/p>\n<\/div>\n
\n
Utilizzare i float per i layout<\/h2>\n
Passiamo ai layout, dove la propriet\u00e0 float<\/code> \u00e8 incredibilmente utile. Possiamo ottenere il classico layout a due colonne in molti modi, molti dei quali usano uno o due elementi a cui si applica float. Diamo un’occhiata ad un semplice esempio: un sito web a due colonne con l’area del contenuto a sinistra, la navigazione a destra ed un’area header e footer a chiuderlo. Per questo articolo, osserveremo solo il codice relativo agli elementi a cui \u00e8 applicato il float. Ecco l’Esempio F<\/a>:<\/p>\n
 \n#container {\n  width: 960px;\n  margin: 0 auto;\n}\n \n#content {\n  float: left;\n  width: 660px;\n  background: #fff;\n}\n \n#navigation {\n  float: right;\n  width: 300px;\n  background: #eee;\n}\n \n#footer {\n  clear: both;\n  background: #aaa;\n  padding: 10px;\n}\n<\/code><\/pre>\n
Ok, vediamo cosa sta succedendo in questo caso. Il genitore che funge da contenitore qui \u00e8 chiamato in maniera appropriata #container<\/code> e tiene a posto gli elementi a cui \u00e8 applicato il float. Se non ci fosse, gli elementi si sposterebbero sui lati pi\u00f9 a sinistra e pi\u00f9 a destra della viewport (la finestra del nostro browser). Poi, abbiamo #content<\/code> e di seguito #navigation<\/code>. Questi sono i nostri elementi a cui \u00e8 applicato il float. Abbiamo mandato #content<\/code> a sinistra e #navigation<\/code> a destra, per ottenere il layout a due colonne. Ho definito per entrambe una larghezza, cos\u00ec che riempiano l’intero contenitore padre. Infine, abbiamo il #footer<\/code>, a cui abbiamo assegnato la propriet\u00e0 clear<\/code>. Come sappiamo da prima, questa propriet\u00e0 clear<\/code> porta gli elementi che si trovano dopo quelli a cui \u00e8 applicato il float nel flusso normale. In questo caso, al #footer<\/code> \u00e8 stato assegnato il valore both<\/code>, che fa in modo che il #footer<\/code> si posizioni sotto agli elementi #content<\/code> e #navigation<\/code>.<\/p>\n
Cosa sarebbe successo se ci fossimo dimenticati di assegnare la propriet\u00e0 clear<\/code> al nostro footer? Date un’occhiata all’Esempio G<\/a>.<\/p>\n
Il nostro #footer<\/code> \u00e8 scivolato verso l’alto sotto a #navigation<\/code>. Questo accade perch\u00e9 c’\u00e8 spazio a sufficienza per ospitare il #footer<\/code> sotto a #navigation<\/code> e, dato che lavoriamo all’interno del flusso normale, questo \u00e8 effettivamente il comportamento corretto. Ma decisamente non \u00e8 quello che cerchiamo, vero? State cominciando a capire l’interazione tra le propriet\u00e0 float<\/code> e clear<\/code> e in che modo si completano l’una con l’altra.<\/p>\n
Se avete il disturbo ossessivo-compulsivo, come me, potreste notare che nell’Esempio F<\/a> #content<\/code> e #navigation<\/code> hanno altezze diverse: ci sono molti modi per gestire questa situazione, ma esulano dallo scopo di questo articolo. Vi suggerisco caldamente di leggere Faux Columns<\/a> di Dan Cederholm per imparare come fare in modo che le altezze sembrino uguali, indipendentemente dal contenuto.<\/p>\n<\/div>\n
\n
Prima il float<\/h2>\n
Fino ad ora abbiamo visto degli esempi piuttosto semplici che non creano troppi mal di testa. Ci sono tuttavia dei gotcha<\/a> a cui dobbiamo prestare attenzione quando lavoriamo con la propriet\u00e0 float. Sorprendentemente, uno dei pi\u00f9 grossi gotcha non sta nel CSS ma in HTML: il posto in cui inserite l’elemento a cui si applica il float nel HTML pu\u00f2 causare risultati differenti. Provate a guardare l’Esempio H<\/a>.<\/p>\n
Qui c’\u00e8 un piccolo e grazioso quadrato che ha un immagine a cui \u00e8 applicato un float a destra e del testo attorno a questa. Il nostro CSS \u00e8 elementare:<\/p>\n
 \n#container {\n  width: 280px;\n  margin: 0 auto;\n  padding: 10px;\n  background: #aaa;\n  border: 1px solid #999;\n}\n \nimg {\n  float: right;\n} \n<\/code><\/pre>\n
Il nostro elemento padre, #container<\/code> ha una larghezza scarsa che mantiene il nostro elemento a cui \u00e8 applicato il float, l’img<\/code>, all’interno dei suoi margini. Il nostro HTML sar\u00e0 cos\u00ec:<\/p>\n
 \n \n<div id=\"container\">\n  <img src=\"image.gif\" \/>\n  <p>This is some text contained within a \nsmall-ish box. I'm using it as an example\nof how placing your floated elements in different \norders in your HTML can affect your layouts. For\nexample, take a look at this great photo \nplaceholder that should be sitting on the right.<\/p>\n<\/div>\n \n<\/code> \n<\/pre>\n
Questo concetto base ci d\u00e0 il risultato desiderato, ma cosa succederebbe se prendessimo questo stesso esempio e riarrangiassimo leggermente il codice HTML? Nell’Esempio I<\/a> sposteremo l’img<\/code> in modo tale che appaia dopo il nostro paragrafo di testo:<\/p>\n
 \n \n<div id=\"container\">\n  <p>This is some text contained within a\nsmall-ish box. I'm using it as an example\nof how placing your floated elements in different \norders in your HTML can affect your layouts. For\nexample, take a look at this great photo \nplaceholder that should be sitting on the right.<\/p>\n  <img src=\"image.gif\" \/>\n<\/div>\n \n<\/code> \n<\/pre>\n
Il nostro risultato \u00e8 meno che desiderabile. La nostra immagine si \u00e8 spostata a destra, ma non \u00e8 pi\u00f9 nell’angolo in alto a destra dove la volevamo: \u00e8 finita sotto al nostro paragrafo di testo. Peggio ancora, sembra che esca dal bordo inferiore dell’elemento padre #container<\/code>. Cosa sta succedendo? Per prima cosa, una regola che ho visto che funziona bene per i miei layout \u00e8 quella di mettere prima il float<\/em>. Ossia, nel mio HTML, metto quasi sempre prima nel markup gli elementi a cui devo applicare il float e li metto anche prima di qualsiasi elemento a cui non viene applicato il float ma che interagir\u00e0 con quelli, come il paragrafo nell’esempio di cui sopra. La maggior parte delle volte, ottengo cos\u00ec il risultato sperato. In secondo luogo, la ragione per cui l’immagine sembra che stia a cavallo del bordo inferiore dell’elemento #container<\/code> ha a che fare con una cosa chiamata \u201ccollapsing\u201d. Vediamo che cosa \u00e8 il collapsing e come possiamo gestirlo al meglio.<\/p>\n<\/div>\n
\n
Collapsing<\/h2>\n
Il collapsing avviene quando un elemento padre che contiene un numero qualsiasi di elementi a cui \u00e8 applicato il float non si espande fino a contenerli interamente, come farebbe se agli elementi non fosse applicato il float. Nell’Esempio I di cui sopra, il nostro elemento padre, #container<\/code>, \u00e8 \u201ccollassato\u201d come se l’elemento img<\/code> a cui \u00e8 stato applicato il float non si trovasse nemmeno l\u00ec. Questo non \u00e8 un bug del browser, al contrario \u00e8 un comportamento atteso ed appropriato. Dal momento che l’elemento con il float era stato originariamente calcolato nel flusso normale e poi rimosso<\/em>, l’elemento #container<\/code> non lo considera all’interno dei suoi confini e pertanto si comporta come se non ci fosse nemmeno. Nota: Eric Meyer ha scritto un bellissimo articolo su questo argomento, intitolato Containing Floats<\/a>, nel quale va molto pi\u00f9 a fondo della questione. E’ una risorsa molto utile. La buona notizia \u00e8 che possiamo porre rimedio a questa situazione in svariati modi: se vi state chiedendo se ha a che fare con la propriet\u00e0 clear<\/code> allora siete sulla buona strada.<\/p>\n
Uno dei modi pi\u00f9 comuni per sistemare un elemento padre collassato \u00e8 di piazzare un elemento con la propriet\u00e0 clear<\/code> dopo l’elemento a cui abbiamo applicato il float. Questo obbligher\u00e0 il padre ad iniziare a rifluire dopo l’elemento con il float. Forse \u00e8 pi\u00f9 semplice mostrarvi ci\u00f2 in azione. Considerate lo HTML dell’Esempio J<\/a> che \u00e8 lo stesso dell’esempio precedente ma con un elemento in pi\u00f9:<\/p>\n
 \n \n<div id=\"container\">\n  <p>This is some text contained within a \nsmall-ish box. I'm using it as an example\nof how placing your floated elements in different\norders in your HTML can affect your layouts. For \nexample, take a look at this great photo \nplaceholder that should be sitting on the right.<\/p>\n  <img src=\"image.gif\" \/>\n  <div style=\"clear: right;\"><\/div>\n<\/div>\n \n<\/code> \n<\/pre>\n
Piazzando un div<\/code> con uno stile inline clear: right<\/code> abbiamo fatto in modo che il nostro #container<\/code> liberi la nostra immagine con il float facendogli ricalcolare la sua altezza ora che c’\u00e8 un elemento sotto ad essa. Sebbene questa soluzione funzioni, potrebbe non essere la pi\u00f9 elegante perch\u00e9 dobbiamo aggiungere del markup extra al nostro documento. Sarebbe stato pi\u00f9 intrigante gestire ci\u00f2 tramite CSS. Ci sono alcuni modi per farlo, pertanto esaminiamone uno di questi.<\/p>\n
Prendete questo esempio: un elemento padre che contiene tre immagini a cui \u00e8 applicato un float. IL nostro HTML \u00e8 come segue:<\/p>\n
 \n \n<div id=\"container\">\n  <img src=\"image.gif\" \/>\n  <img src=\"image.gif\" \/>\n  <img src=\"image.gif\" \/>\n<\/div>\n \n<\/code> \n<\/pre>\n
Ed il nostro CSS \u00e8 cos\u00ec:<\/p>\n
 \n \n#container {\n  width: 260px;\n  margin: 0 auto;\n  padding: 10px 0 10px 10px;\n  background: #aaa;\n  border: 1px solid #999;\n}\n \nimg {\n  float: left;\n  margin: 0 5px 0 0;\n}\n \n<\/code> \n<\/pre>\n
Quando guarderete questo esempio in azione, realizzerete rapidamente che il nostro elemento padre non contiene le immagini con il float. Di nuovo, questo \u00e8 un comportamento atteso perch\u00e9 gli elementi con il float vengono rimossi dal flusso. Pertanto, in accordo con il nostro elemento padre, #container<\/code>, \u00e8 vuoto. Osservate ci\u00f2 nell’Esempio K<\/a>.<\/p>\n
Adesso proviamo a rimediarvi con i CSS invece che aggiungendo del markup HTML al nostro documento, come avevamo fatto precedentemente. C’\u00e8 un metodo che permette ad un elemento padre di liberarsi di qualunque elemento con il float al suo interno. Usa una propriet\u00e0 CSS chiamata overflow<\/code> con il valore hidden<\/code>. Si noti che la propriet\u00e0 overflow<\/code> non era stata creata per questo utilizzo e potrebbe dare dei problemi quali nascondere del contenuto o far apparire delle barre di scorrimento non desiderate. Potete approfondire l’argomento leggendo questo articolo<\/a> e quest’altro<\/a>. Tuttavia, ai fini del nostro esempio, applicheremo la propriet\u00e0 overflow: hidden<\/code> al nostro elemento padre #container<\/code>:<\/p>\n
 \n \n#container {\n  overflow: hidden;\n  width: 260px;\n  margin: 0 auto;\n  padding: 10px 0 10px 10px;\n  background: #aaa;\n  border: 1px solid #999;\n}\n \n<\/code> \n<\/pre>\n
Il nostro risultato si trova nell’Esempio L<\/a>. Piuttosto forte, vero? Un altro metodo che d\u00e0 risultati simili ma con minori caveat usa lo pseudo-selettore :after<\/code>. Utilizzando il nostro esempio, il codice sar\u00e0:<\/p>\n
 \n \n#container:after {\n  content: \".\";\n  display: block;\n  height: 0;\n  clear: both;\n  visibility: hidden;\n}\n \n<\/code> \n<\/pre>\n
In questo caso, il CSS sta piazzando un nuovo elemento dopo il nostro elemento #container<\/code>, con del contenuto al suo interno (in questo caso, un punto) a cui imposta la visibilit\u00e0 a hidden e senza altezza. Potete trovare una panoramica completa e dettagliata di questa tecnica su Position is Everything<\/a>.<\/p>\n
Infine, Eric Meyer spiega un terzo modo per gestire questo problema nel suo articolo citato sopra, Containing Floats<\/a>. Secondo la Specifica 2.1 di CSS:<\/p>\n
\n
un elemento a cui \u00e8 applicato float si espander\u00e0 fino a contenere gli elementi che discendono da esso.<\/p>\n<\/blockquote>\n
Quindi, in questo caso, applicare il float al nostro elemento contenitore causer\u00e0 l’espansione di questo fino a contenere la nostra immagine ed il nostro paragrafo in maniera equivalente ai metodi descritti sopra.<\/p>\n
Fondamentalmente, tutte queste soluzioni fanno la stessa cosa: stanno facendo in modo che gli elementi padre rispettino il flusso dei loro figli con il float. Ciascuno ha i suoi meriti e la sua utilit\u00e0. Dovrete impararli tutti e poi applicare quello che funziona meglio nel vostro caso specifico.<\/p>\n<\/div>\n
\n
Cose che possono causare una rapida perdita di capelli<\/h2>\n
Credeteci o meno, ma ci sono alcuni bug dei browser che gli elementi con il float possono sollevare, come il double margin bug<\/a> ed il 3px Text-Jog<\/a>. Entrambe esulano dallo scopo di questo articolo, ma state tranquilli che per tutti e due ci sono dei semplici rimedi, se volete supportare i vecchi browser.<\/p>\n<\/div>\n
\n
Conclusioni<\/h2>\n
Utilizzando la propriet\u00e0 float<\/code> potete riempire la vostra cassetta degli attrezzi per i layout in modi piuttosto forti e \u201cresponsive\u201d. Comprendere come funziona ed i principi che la regolano vi dar\u00e0 una base solida per l’utilizzo efficace del float.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
La propriet\u00e0 float \u00e8 una risorsa molto utile e potente a disposizione dei web designer\/developer che lavorano con HTML e CSS. Purtroppo per\u00f2, pu\u00f2 anche causare frustrazione e confusione se non si comprende appieno il suo funzionamento. Mettete alla prova la vostra conoscenza o fate un ripasso con Noah Stokes, che esplora la teoria ed il comportamento del float e ci guida attraverso  le insidie correlate all’uso di float.<\/p>\n","protected":false},"author":818,"featured_media":7000613,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,272,40],"tags":[],"coauthors":[315],"class_list":["post-154","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-layout-and-grids","category-numero-26-22-marzo-2011"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000613"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=154"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}