Каково стандартное поведение float: right после float: left?

Question

Предположим, есть такие теги HTML:

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

И стиль CSS:

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

Каково стандартное поведение дисплея?

Вв каком-то браузере я вижу

Текст 1 Текст 2

В некоторых версиях IE я вижу

Текст 1

         Text 2

Кажется, что поплавок: правый промежуток опущен до следующей строки.

Answer 1

Современные браузеры правильно рассчитали бы ширину сжатых с плавающей точкой и поместили бы их в одну строку, при условии, что ширина с плавающей точкой не превышает ширину родительских элементов. Я считаю, что это правильное поведение при рендеринге.

Internet Explorer (5, 6, 7) не будет отображать их одинаково, потому что он не способен вычислить ширину сжатого с плавающей запятой, поэтому он переместит его на следующую строку, если вы явно не определите ширину.

Answer 2

По умолчанию <span> является встроенным элементом. С точной разметкой, которую вы предоставили, все браузеры ДОЛЖНЫ отображать эти два в одной строке, если только вычисленная ширина двух <span> s не превышает длину текущей строки.