Qual è il comportamento standard di float: right following float: left?

Question

Supponiamo che ci sia tali tag HTML:

​<span> 
    <span id='s1'>Text 1</span> 
    <span id='s2'>Text 2</span> 
</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

E lo stile CSS è:

​#s1 { 
    float: left; 
} 
#s2 { 
    float: right; 
} 

Qual è il comportamento standard del display?

In alcuni browser vedo

Testo 1 Testo 2

In alcune versioni di IE, vedo

Testo 1

  Text 2 

Sembra il galleggiante: la spanna a destra viene spostata in basso alla riga successiva.

Answer 1

I browser moderni calcolerebbero correttamente la larghezza dei galleggianti avvolti in fardelli e li faranno essere nella stessa linea, a condizione che le larghezze dei galleggianti non superino la larghezza degli elementi genitore. Credo che questo sia il comportamento corretto per il rendering.

Internet Explorer (5, 6, 7) non li renderà allo stesso modo perché non è in grado di calcolare la larghezza del float compresso, quindi lo sposterà nella riga successiva a meno che non si definisca esplicitamente la larghezza .

Answer 2

Per impostazione predefinita, <span> è un elemento in linea. Con il markup esatto che hai fornito, tutti i browser DOVREBBE visualizzare questi due sulla stessa linea, a meno che la larghezza calcolata dei due <span> s combinata sia maggiore della lunghezza della linea corrente.