Vantaggi dell'utilizzo di display: inline-block vs float: lasciato in CSS

Normalmente, quando vogliamo avere multipli DIVsdi fila, usiamo float: left, ma ora ho scoperto il trucco didisplay:inline-block

Link di esempio qui . Mi sembra che display:inline-blocksia un modo migliore di align DIVsseguito, ma ci sono degli svantaggi? Perché questo approccio è meno popolare del floattrucco?

In 3 parole: inline-blockè meglio.

Blocco in linea

L'unico inconveniente display: inline-blockdell'approccio è che in IE7 e sotto un elemento può essere visualizzato solo inline-blockse era già inlinedi default. Ciò significa che invece di utilizzare un <div>elemento devi usare un <span>elemento. Non è affatto un grosso svantaggio perché semanticamente a <div>è per dividere la pagina mentre a <span>è solo per coprire un arco di una pagina, quindi non c'è un'enorme differenza semantica. Un enorme vantaggio display:inline-blockè che quando altri sviluppatori mantengono il tuo codice in un secondo momento, è molto più ovvio cosa display:inline-blocke text-align:right sta cercando di realizzare rispetto a un'istruzione float:lefto float:right. Il mio vantaggio preferita del inline-blockmetodo è che è facile da usare vertical-align: middle, line-heightetext-align: centercentrare perfettamente gli elementi, in modo intuitivo. Ho trovato un ottimo post sul blog su come implementare il blocco inline tra browser, sul blog di Mozilla . Ecco la compatibilità del browser .

Galleggiante

Il motivo per cui l'uso del floatmetodo non è adatto al layout della tua pagina è perché la floatproprietà CSS era originariamente concepita solo per avere il testo a capo intorno a un'immagine (stile rivista) e, per progettazione, non è più adatta per scopi di layout di pagina generali. Quando si modificano elementi fluttuati in un secondo momento, a volte si verificano problemi di posizionamento perché non si trovano nel flusso di pagine . Un altro svantaggio è che in genere richiede un clearfix altrimenti potrebbe rompere gli aspetti della pagina. Il clearfix richiede l'aggiunta di un elemento dopo gli elementi flottanti per impedire al loro genitore di collassare attorno a loro che attraversa la linea semantica tra lo stile di separazione dal contenuto ed è quindi un anti-modello nello sviluppo web .

Eventuali problemi di spazio bianco menzionati nel link sopra potrebbero essere facilmente risolti con la white-spaceproprietà CSS.

Modificare:

SitePoint è una fonte molto credibile di consulenza sul web design e sembrano avere la stessa opinione che io faccio:

Se non conosci i layout CSS, ti verrebbe il perdono di pensare che usare CSS fluttuanti in modi fantasiosi sia l'apice dell'abilità. Se hai consumato quanti tutorial di layout CSS puoi trovare, potresti supporre che padroneggiare i float sia un rito di passaggio. Sarai abbagliato dall'ingegnosità, stupito dalla complessità e otterrai un senso di realizzazione quando finalmente capirai come funzionano i galleggianti.

Non farti ingannare. Ti viene fatto il lavaggio del cervello.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Aggiornamento 2015 - Flexbox è una buona alternativa per i browser moderni :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Ulteriori informazioni

Aggiornamento del 21 dicembre 2016

Bootstrap 4 sta rimuovendo il supporto per IE9 e quindi sta eliminando i float dalle file e sta diventando pieno Flexbox.

Richiesta pull # 21389

Anche se concordo sul fatto che in generale inline-blockè meglio, c'è un'altra cosa da tenere in considerazione se si utilizzano larghezze percentuali per creare una griglia reattiva (o se si desidera larghezze pixel perfette):

Se stai utilizzando inline-blockgriglie con larghezza totale del 100% o quasi del 100%, devi assicurarti che il markup HTML non contenga spazi bianchi tra le colonne .

Con i float, questo non è qualcosa di cui devi preoccuparti: le colonne galleggiano su qualsiasi spazio bianco o altro contenuto tra le colonne. Le risposte a questa domanda hanno alcuni buoni consigli su come rimuovere gli spazi bianchi HTML senza rendere brutto il tuo codice .

Se per qualsiasi motivo non riesci a controllare il markup HTML (ad es. Un CMS restrittivo), puoi provare i trucchi descritti qui, oppure potresti dover scendere a compromessi e usare float invece di inline-block. Ci sono anche brutti trucchi CSS che dovrebbero essere usati solo in circostanze estreme, come font-size:0;nel contenitore della colonna, quindi riapplicare la dimensione del carattere all'interno di ogni colonna .

Per esempio:

• Ecco una griglia a 3 colonne con una larghezza del 33,3% confloat: left . "Funziona" (ma per il wrapper deve essere cancellato).
• Ecco la stessa griglia esatta, coninline-block . Lo spazio bianco tra i blocchi crea uno spazio a larghezza fissa che spinge la larghezza totale oltre il 100%, interrompendo il layout e facendo cadere l'ultima colonna lungo una linea.
• Ecco la stessa griglia, con inline-blocke senza spazi bianchi tra le colonne nell'HTML . "Funziona di nuovo" di nuovo, ma l'HTML è più brutto e il tuo CMS potrebbe forzare un qualche tipo di preimpostazione o rientro nel suo output HTML che lo rende difficile da realizzare nella realtà.

Se si desidera allineare i divpixel con precisione, utilizzare float. inline-blocksembra richiedere sempre di tagliare alcuni pixel (almeno in IE)

Puoi trovare una risposta approfondita qui .

Ma in generale con floatte devi essere consapevole e prenderti cura degli elementi circostanti e inline-blockun modo semplice per allineare gli elementi.

Grazie

C'è una caratteristica del blocco inline che potrebbe non essere semplice però. Ciò significa che il valore predefinito per l'allineamento verticale nei CSS è baseline. Ciò può causare alcuni comportamenti di allineamento imprevisti. Guarda questo articolo

http://www.brunildo.org/test/inline-block.html

Invece, quando fai un float: a sinistra, i div sono indipendenti l'uno dall'altro e puoi allinearli usando il margine facilmente.