Qual è la differenza tra Float: sinistra vs display: inline? Mentre ogni elemento nel browser va a sinistra di default

Qual è la differenza tra Float vs Display: inline? di default tutto va a sinistra in ogni browser. quindi 2 visualizzare elementi inline dovrebbero essere eseguiti come float: a sinistra.

http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

display:inline significa che un elemento è “stack” accanto ad altri elementi, come immagini, span o il tag grassetto. A ciò si oppongono gli elementi a livello di blocco ( display:block ) che occupano spazio orizzontale, implicano un’interruzione di riga e non si accosteranno l’una accanto all’altra, come div, paragrafi o tabelle.

Pensare in questo modo…

  

float è una nozione diversa, spostando il contenuto a sinistra oa destra. Per impostazione predefinita, un elemento flottato è in linea e gli elementi flottati si impilano uno accanto all’altro.

Tutti questi tipi di elementi fanno parte del normale stream di documenti, nel senso che occupano “spazio” nel design che non può essere condiviso.

Esistono due tipi di formattazione: a livello di blocco e in linea. La formattazione a livello di blocco viene eseguita con un modello di box che utilizza un set di regole per il layout.

La formattazione in linea è ciò che normalmente il testo ottiene. Significa, informalmente, che le cose sono riempite in linee.

A volte, vuoi cambiare la formattazione predefinita che otterrà un object. Qualcosa che normalmente potrebbe essere formattato a livello di blocco che potresti voler trattare come inline. Ad esempio, un div contenente contenuti come la grafica di una chiave potrebbe dover essere visualizzato all’interno di una frase. Si potrebbe quindi sovrascrivere la sua formattazione con display:inline . Le immagini sono già visualizzate “Inline”

Le specifiche CSS hanno una definizione sorprendentemente semplice per i float:

Un float è una casella che viene spostata a sinistra oa destra sulla linea corrente. La caratteristica più interessante di un float (o “floated” o “floating” box) è che il contenuto può fluire lungo il suo lato

Quindi un float è una sorta di terza categoria di modelli di formattazione. Si riferisce a inline come, in modo informale, un modello di layout.

Anche se è troppo tardi per rispondere, ma una delle principali differenze di cui posso parlare qui è: Clear

Negli elementi float si dovrebbero Clear float ma negli elementi inline non è richiesta la cancellazione.

Puoi vedere un esempio dal vivo qui: http://jsfiddle.net/K9PXF/

E questo è un ottimo articolo su float e clearing: http://css-tricks.com/all-about-floats/

Ricordo sempre cosa sia il floating ricordando l’originale che agisce molto simile al float:left . Fondamentalmente float, fa galleggiare l’immagine a sinistra e avvolge il testo o altri contenuti attorno ad esso. Senza float verrà visualizzato come una porzione di testo.

Float funziona in modo simile ad altri strumenti di documenti in cui è ansible inserire il testo attorno all’immagine (o all’elemento HTML).

Ogni browser ha un “stream”. Il tipo di stream emula un elaboratore di testi in quegli elementi che scorre da sinistra a destra, dall’alto verso il basso. Elementi che non si adattano alla fine di una “linea”, avvolgono alla successiva “linea”, per così dire.

Gli elementi di blocco occupano l’intera linea. Gli elementi in linea occupano tutto lo spazio necessario, quindi altri elementi possono sedersi accanto a loro sulla stessa riga. A meno che non sia stata dichiarata una larghezza, ciò non accade con gli elementi di blocco.

Il floating di un elemento estrae gli elementi dal stream normale e li sposta a sinistra / destra. Lo spazio occupato dall’object prima che fosse flottato è vuoto e crolla. Se faccio galleggiare due elementi che occupano più spazio di quanto la linea possa contenere, uno potrebbe cadere sulla “linea” successiva.

@Jitendra: la visualizzazione di due span in linea li metterà insieme nel stream, sì. I due elementi mobili che non occupano lo spazio della linea completa sembreranno fare la stessa cosa. Hanno sicuramente usi diversi, però.

Se volessi avere un stream di testo attorno a un’immagine in un paragrafo, avrei spostato l’immagine non usando il display:inline . Se volessi creare un menu orizzontale da elementi di elementi di elenco, userei display:inline , non float .

display: inline significa che l’elemento si comporta come un invece di un

: cioè non è un blocco.

Gli elementi flottati non si trovano nel normale stream del documento. Ecco una buona descrizione.

ETA:

Prova questo codice. Se non riesci a vedere la differenza, allora non posso aiutarti.

      

The is an inline paragraph with lots of words.

The is an inline paragraph with lots of words.



The is a left floated paragraph with lots of words.

The is a right floated paragraph with lots of words.

Il normale stream di lavoro di un browser consiste nel visualizzare gli elementi da sinistra a destra, ciascuno vicino all’altro (se elementi in linea) … quando una linea termina a causa della dimensione della pagina Web, il browser si riavvia per visualizzare il elementi da sinistra a destra ma nella riga successiva.

Una direttiva “float”, su un elemento, forza il browser a visualizzare l’elemento fuori dal normale stream di lavoro, in alto a sinistra o in alto a destra della pagina web.

La direttiva “display inline” forza la visualizzazione degli elementi di blocco in linea, quindi il browser gestisce questi elementi come spiegato sopra!

IN RISPOSTA ALLA TUA DOMANDA: No! Come ho scritto: il float: left forza qualsiasi elemento (block o not block), posizionato su qualsiasi linea di una pagina web, da flottare sul lato sinistro della pagina web … anche se l’allineamento del testo è impostato a destra”! Se l’allineamento del testo è impostato a sinistra, applicando un float: cuciture a sinistra che non accade nulla … invece anche in quel caso l’elemento è costretto ad uscire dal normale stream di lavoro del browser, infatti, di solito, il margine lasciato è reseted!

Il display: inline non influisce sugli elementi inline … se il testo di allineamento (del contenitore degli elementi) è impostato su “right”, un display: inline non lo fa galleggiare a sinistra (nota, sono facendo riferimento a elementi in linea) … perché “display: inline” dice al browser solo per visualizzare un elemento nella stessa riga del normale stream di lavoro … quindi, se un elemento è in linea (ad esempio un elemento di collegamento), questa proprietà non cambia il suo comportamento!

Quindi, “display: inline” riguarda solo gli elementi “block”! Ma anche in questo caso, non rimane a sinistra dell’elemento di blocco, ma forza l’elemento solo a essere visualizzato nella stessa riga degli altri elementi in linea!

INFORMAZIONI SUL TUO ESEMPIO: le div (s) sono elementi di blocco, il normale stream di lavoro non è in linea … quindi il browser, per impostazione predefinita, li mostra uno sotto l’altro , come in questo esempio:

 
Link one
Link two
Link three
Link four

anche se applichi un float: lasciato al primo div, le cuciture che non succede nulla solo perché è già nell’angolo in alto a sinistra … dove dovrebbe andare altrimenti !!! ???

Il secondo esempio …

 
Link one
Link two
Link three
Link four

Quando applichi un float: a sinistra div (s) adiacente, forzare il browser per visualizzarli fuori dal normale stream di lavoro (Come ho triste, gli elementi di blocco viene visualizzato, per impostazione predefinita, uno sotto l’altro!), Fluttuante il div (s) sul lato sinistro … in questo caso uno vicino all’altro. Si noti che, come mi dispiace, il margine viene resettato … perché le div (s) non sono su una linea ordinaria del browser, ma sono solo flottanti a sinistra … di nuovo, fuori dal normale stream di lavoro!

In effetti, il prossimo esempio conferma ciò che in teoria mi dispiace … la visualizzazione: forza il browser in linea per visualizzare elementi di blocco (div) sulla stessa linea rispettando il loro margine di default e il padding :

 
Link one
Link two
Link three

Ma il display: inline non forza gli elementi a fluttuare a sinistra ma solo a essere gestiti come elementi inline , per chiarire questo concetto guarda la grande differenza tra i due esempi qui sotto!

PRIMO:

 
Link one
Link two
Link three
Link four

SECONDO:

 
Link one
Link two
Link three
Link four

INFORMAZIONI SULLA LARGHEZZA: la visualizzazione: applicata in linea su un elemento di blocco senza larghezza fissa, forza la larghezza a collassare sul valore minimo (larghezza del contenuto + riempimento), poiché si tratta del normale comportamento di un elemento in linea.

L’elemento div, per impostazione predefinita, ha una larghezza del 100% … quindi, quando applichi un float: left la larghezza è ancora impostata al 100% ma il floating sulla sinistra impone al browser di gestire e mostrare la sua larghezza in un modo insolito! In questo caso non esiste una regola generale, ogni elemento ha un comportamento diverso!

Vai a w3schools e prova questo nel loro editor (perché i link delle immagini sono interamente a loro, oppure puoi sostituire l’immagine src dagli URL delle tue immagini). Quindi ridimensiona le windows.

Ciò che noterete è che, in caso di visualizzazione: in linea, il testo verrà diviso in parole e alcune parole del testo verranno visualizzate nella riga successiva. Anche se nel caso di float: lasciato tutto il testo verrà visualizzato insieme come elemento e non verrà diviso.

Lo scopo di inline è solo quello di visualizzare tutto in una LINE, sebbene lo scopo del float sia quello di organizzare gli ELEMENTS allineandosi ad alcune dimensioni.

       

Image Gallery


Below are the inline elements

Try resizing the window to see what happens when the images does not have enough room.



Below is the floating elements

Try resizing the window to see what happens when the images does not have enough room.