float: left; vs display: inline; vs display: blocco in linea; vs display: table-cell;

Le mie domande)

1. Uno di questi metodi è preferito da un web designer professionista?

2. Uno di questi metodi è preceduto da un browser Web quando si disegna il sito Web?

3. È solo una preferenza personale?

4. Ci sono altre tecniche che mi mancano?

Nota: le domande precedenti riguardano la progettazione di un layout a più colonne

float: left;

http://jsfiddle.net/CDe6a/

Questo è il metodo che uso sempre durante la creazione di layout di colonna e sembra funzionare perfettamente. Il genitore però crolla su se stesso, quindi devi solo ricordarti di clear:both;dopo. Un altro svantaggio che ho appena trovato è stato l'incapacità di allineare il testo verticalmente.

display: inline;

Questo sembra correggere il problema del genitore collassato, ma aggiunge spazi bianchi.

http://jsfiddle.net/CDe6a/1/

La rimozione di spazi bianchi da HTML sembra essere la soluzione più semplice a questo problema, ma non è desiderabile se sei davvero esigente sul tuo HTML.

http://jsfiddle.net/CDe6a/2/

display: inline-block;

Sembra comportarsi esattamente come display:inline;.

http://jsfiddle.net/CDe6a/3/

visualizzare: table-cell;

http://jsfiddle.net/CDe6a/4/

Funziona perfettamente

I miei pensieri:

Sono sicuro che mi mancheranno un sacco di cose, come certe eccezioni che romperanno il layout ma, display:table-cell;sembra funzionare al meglio, e penso che inizierò a sostituire float:left;poiché mi sembra sempre di sbagliare clear:both;. Ho letto molti articoli e blog su questo sul web, ma nessuno di questi mi dà una risposta definitiva su cosa dovrei usare quando definisco il mio sito web.

Delle opzioni che hai chiesto su:

• float:left;
  Non mi piacciono i galleggianti a causa della necessità di avere un markup aggiuntivo per cancellare il galleggiante. Per quanto mi riguarda, l'intero floatconcetto è stato mal progettato nelle specifiche CSS. Ora non possiamo farci nulla. Ma la cosa importante è che funziona e funziona in tutti i browser (anche IE6 / 7), quindi usalo se ti piace.

Il markup aggiuntivo per la cancellazione potrebbe non essere necessario se si utilizza il :afterselettore per cancellare i float, ma questa non è un'opzione se si desidera supportare IE6 o IE7.

• display:inline;
  Questo non dovrebbe essere usato per il layout, ad eccezione di IE6 / 7, dove display:inline; zoom:1è presente un hack fallback per il supporto non funzionante inline-block.

• display:inline-block;
  Questa è la mia opzione preferita. Funziona bene e in modo coerente su tutti i browser, con un avvertimento per IE6 / 7, che lo supporta per alcuni elementi. Ma vedi sopra per la soluzione hacky per aggirare questo.

L'altro grande avvertimento inline-blockè che, a causa dell'aspetto in linea, gli spazi bianchi tra gli elementi sono trattati allo stesso modo degli spazi bianchi tra le parole del testo, in modo da poter ottenere spazi vuoti tra gli elementi. Ci sono soluzioni alternative a questo, ma nessuno di questi è l'ideale. (il migliore è semplicemente non avere spazi tra gli elementi)

• display:table-cell;
  Un altro in cui avrai problemi con la compatibilità del browser. IE precedenti non funzioneranno affatto con questo. Ma anche per altri browser, vale la pena notare che table-cellè progettato per essere utilizzato in un contesto di essere all'interno di elementi che sono designati come tablee table-row; l'utilizzo table-cellin isolamento non è il modo previsto per farlo, quindi potresti riscontrare browser diversi che lo trattano in modo diverso.

Altre tecniche che potresti aver perso? Sì.

• Dal momento che dici che è per un layout a più colonne, c'è una funzione Colonne CSS che potresti voler conoscere. Tuttavia non è la funzionalità più ben supportata (non supportata da IE anche in IE9 e un prefisso del fornitore richiesto da tutti gli altri browser), quindi potresti non voler usarla. Ma è un'altra opzione e tu l'hai chiesto.

• C'è anche la funzione CSS FlexBox, che ha lo scopo di consentire al testo di scorrere da una casella all'altra. È una funzione interessante che consentirà alcuni layout complessi, ma è ancora molto in fase di sviluppo - vedi http://html5please.com/#flexbox

Spero che aiuti.

Di solito uso float: left;e aggiungo overflow: auto;per risolvere il problema del genitore collassato (sul perché questo funziona, overflow: autoespanderà il genitore invece di aggiungere barre di scorrimento se non gli dai un'altezza esplicita, overflow: hiddenfunziona anche). La maggior parte delle esigenze di allineamento verticale che ho avuto sono per una riga di testo nelle barre dei menu , che può essere risolta usando la line-heightproprietà. Se avessi davvero bisogno di allineare verticalmente un elemento a blocchi, impostarei un'altezza esplicita sull'elemento principale e sull'elemento allineato verticalmente, posizione assoluta, primo 50% e margine negativo.

Il motivo per cui non uso display: table-cellè il modo in cui trabocca quando hai più elementi di quelli che la larghezza del sito può gestire. table-cell forzerà l'utente a scorrere in orizzontale, mentre float avvolgerà il menu di overflow, rendendolo ancora utilizzabile senza la necessità di scorrimento orizzontale.

La cosa migliore di float: left e overflow: auto è che funziona fino a IE6 senza hack, probabilmente anche oltre.

Direi che dipende da cosa ti serve per:

1. Se ne hai bisogno solo per ottenere un layout a 3 colonne, ti suggerisco di farlo float.

2. Se è necessario per il menu, è possibile utilizzare inline-block. Per il problema degli spazi bianchi, puoi usare alcuni trucchi come descritto da Chris Coyier qui http://css-tricks.com/fighting-the-space-b Between-inline-block-elements/ .

3. Se è necessario effettuare un'opzione a scelta multipla, la cui larghezza deve essere distribuita uniformemente all'interno di una casella specifica, preferirei display: table. Questo non funzionerà correttamente in alcuni browser, quindi dipende dal supporto del browser.

Infine, quale potrebbe essere il metodo migliore sta usando flexbox. Le specifiche per questo sono cambiate alcune volte, quindi non è ancora stabile. Ma una volta che è stato finalizzato, questo sarà il metodo migliore che credo.

Preferisco il blocco in linea, sebbene anche il float sia utile. La cella di tabella non viene visualizzata correttamente dai vecchi IE (né blocca in linea, ma c'è l' zoom: 1; *display: inlinehack che utilizzo frequentemente). Se hai figli che hanno un'altezza più piccola rispetto ai loro genitori, i galleggianti li porteranno in cima, mentre il blocco in linea a volte si rovinerà.

Il più delle volte, il browser interpreterà tutto correttamente, a meno che, ovviamente, non sia IE. Devi sempre controllare per assicurarti che IE non faccia schifo, ad esempio il concetto di cella di tabella.

In tutta la realtà, sì, si riduce alle preferenze personali.

Una tecnica che potresti usare per sbarazzarti dello spazio bianco sarebbe quella di impostare uno font-size0 sul genitore, quindi dare la font-sizeschiena ai bambini, anche se è una seccatura, e grossolano.

Solo per la cronaca, da aggiungere alla risposta di Spudley, c'è anche la possibilità di usare position: absolutee margini se si conoscono le larghezze delle colonne.

Per me, il problema principale quando chossing un metodo è se hai bisogno delle colonne per riempire l'intera altezza (altezze uguali), dove la cella di tabella è il metodo più semplice (se non ti interessa molto per i browser più vecchi).

Preferisco inline-block, ma floatsono ancora un modo utile per mettere insieme gli elemenet HTML, specialmente quando abbiamo elementi che si dovrebbero attaccare a sinistra e uno a destra, galleggiano lavorando meglio con la scrittura di meno righe, mentre il blocco inline funziona bene in molti altri casi .