I galleggianti sono cattivi? Cosa dovrebbe essere usato al suo posto

Ho fatto il salto dal design del tavolo al css circa una settimana fa e da allora ho letto di più su di esso. Ieri ho letto un lungo post qui su SO, dove i manifesti stavano battendo i galleggianti e su quanto sono deprezzati. Si è parlato molto del fatto che il inline-block sia stato utilizzato al suo posto.

Ho un design HTML5 che ho appena finito e sembra fantastico in firefox e chrome, ma quando testato da altri computer che eseguono le versioni di Internet Explorer 7, 8 e 9, il design esplode in modo assoluto. Mi sembra che qualsiasi cosa in questo progetto che ho pubblicato correttamente non sia onorata in IE. Sembra solo avvolgere qualsiasi cosa ci sia a sinistra.

Mi piacerebbe sapere se sto bene con i float o se dovrei usare il inline-block . Un esempio di come avere due div uno vicino all’altro dove uno è sul lato sinistro e l’altro sulla destra, usare il inline-block sarebbe bello.

Ho un altro dilemma qui che spero che qualcuno mi possa aiutare. Sono su una vecchia macchina di sviluppo con XP SP1. Il miglior browser IE con cui posso testare è 6. Mi piacerebbe in qualche modo procurarmi qualcosa che mi permetta di testare le versioni 7, 8 e 9 (e 10 se è ancora disponibile). Qualcuno può consigliare qualche soluzione per questo?

I galleggianti non sono mai stati pensati per il layout.

Sono semplicemente pensati per prendere un elemento, metterlo da parte e far scorrere altri contenuti attorno ad esso. È tutto.

Allora, perché li stiamo usando per il layout?

Poiché è ansible cancellare un piè di pagina sotto le due colonne flottate, è stato creato il layout float. Se ci fosse mai stato un modo per “cancellare” gli elementi sotto gli elementi posizionati, non ci saremmo mai preoccupati di usare i float per il layout.

Perché li stiamo ancora utilizzando per il layout?

Perché alternative migliori, come il modulo di layout CSS flessibile e il modulo di layout modello CSS, continuano a funzionare come bozze e non sono supportate da tutti i browser.

Perché il tuo design si rompe in IE 7,8 e 9?

Probabilmente c’è un problema con il tuo codice, cioè non stai usando i float. Questo non è totalmente colpa tua, dal momento che non sono mai stati pensati per il layout in primo luogo. Tuttavia, posso assicurarti che funzionano. Ho usato float per il layout per molto tempo ed è sempre stato in grado di farlo funzionare nella maggior parte dei browser.

I blocchi in linea sono migliori?

Molti layout che possono essere fatti con float possono essere fatti con blocchi in linea. Tuttavia, non risolvono tutti i problemi di layout e non sono pensati per i layout. Trovo che uno di loro sarà in genere più adatto per il layout previsto.

Riferimenti

Floats Do not Suck If You Use Right Right

I float dovrebbero funzionare bene, anche se dipende da come lo hai usato – che ne dici di un link al tuo design?

inline-block non funziona correttamente nelle versioni di Internet Explorer meno di 8: http://www.quirksmode.org/css/display.html

Puoi usare questo esempio in linea

 
That is the first div
That is the second div

style.css

  #firstdiv{ display:inline; background-color: #f00; } #seconddiv{ display:inline; background-color: #00f; } 

funzionerà a IE8 e versioni successive, ma se vuoi utilizzarlo in IE6 e 7, crea il seguente codice in style.css

 #firstdiv{ display:block; background-color: #f00; float: left; } #seconddiv{ display:block; background-color: #00f; float: right; } 

se usi HTML5 e CSS3 e vuoi che funzioni con IE6 leggi il seguente articolo 5 Strumenti per rendere IE Play Nice con CSS3 e HTML5 in WordPress

puoi leggere anche questo articolo è una differenza molto utile tra blocco, inline e inline-block