In questo caso parleremo di due dei problemi più comuni quando utilizziamo la proprietà float per creare il layout.
Per quelli di voi che sono nuovi ai CSS, Float è una proprietà CSS che consente di allineare i propri elementi, come i DIV, per creare layout di siti Web. I valori per Float includono Left, Right e None. Puoi utilizzare i float per allineare gli elementi e, se fatto correttamente, puoi farlo in modo che sia dinamico, quasi fluido.
Diciamo che è necessario creare una galleria di immagini. La tua idea è di posizionare 4 immagini su ogni linea, ma dopo aver posizionato la prima immagine la seconda immagine passa alla riga successiva.
Trucchi CSS: risoluzione dei problemi CSS
In passato ho ammesso di usare valori negativi per allineare le mie immagini in modo che la seconda immagine si mostrasse accanto alla prima usando la proprietà margin-left, right, top, bottom. Ho anche preso in considerazione l';utilizzo di tabelle, ma ho preferito utilizzare invece valori negativi. Non c';è niente di sbagliato nell';usare la proprietà del margine negativo, ma non quando c';è una soluzione migliore, come usare i float.
Se applichi Float a quelle immagini, esse si allineano in una riga, quindi puoi continuare ad aggiungere altre immagini usando la proprietà float e non dovresti preoccuparti se si allineano o meno perché la proprietà float riconosci che ci sono troppi elementi su questa linea e spingerà le immagini alla riga successiva.
Ma cosa succede se stai utilizzando Floats per il layout del tuo sito web, per le tue div e non solo per le immagini.
Ci sono 2 problemi principali che dovrai affrontare con Floats.
Diciamo che hai tre elementi. Parent1 (contenitore principale del sito Web), Child1 (barra di navigazione sinistra) e Child2 (area del contenuto). Parent1 è il contenitore div principale e il tuo obiettivo è quello di far flottare le div al bambino una accanto all';altra, come se avessi un';area di navigazione a sinistra e un';area di contenuto corretta. Sembra fantastico.
Hai impostato l';altezza di parent1 su auto e hai impostato l';altezza di child1 e child2 come auto. Ma una volta aperto e visualizzato in una pagina web l';altezza dell';elemento genitore è alta solo 1 o 2 pixel, gli elementi figlio sembrano sembrare fluttuanti sopra il contenitore genitore e il contenitore genitore non sembra riconoscere i div altezza. (vedi link di test 1 sul sito web).
Nessun problema, ecco una soluzione semplice per questo.
Aggiungi overflow: auto; per il CSS del contenitore padre e riconoscerà automaticamente i float e aumenterà di altezza in modo che appaia che i float fanno parte del contenitore genitore esattamente come volevi. Wow tutto ciò in una sola riga.
Ma non dimenticare che c';è ancora un altro problema di Float.
Il secondo problema è più un problema di compatibilità cross-browser con i float, ma ancora importante. Se provi a Float for ex: tre immagini a sinistra e utilizzi la proprietà margin, a volte il primo contenitore che galleggia avrà il doppio del margine in Internet Explorer.
Benvenuto nel Bug Flood Peekaboo Bug / IE Float Double Margin Bug.
È giusto se hai provato a far fluttuare un elemento e utilizzare qualsiasi tipo di margine, quindi noterai che raddoppierà il margine in IE.
Sono sicuro che ci siano degli hack decenti, ma c';è un modo semplice per sistemarlo nei CSS. Il Margine del galleggiante. Nel CSS per quel contenitore aggiungi display: in linea non so perché, ma per qualche motivo questa proprietà sembra risolvere la proprietà del doppio margine.
Questo è tutto? Sì è quello. Ora puoi iniziare a usare i float.