Почему плавающий промежуток падает?

Question

Этот код будет хорошо работать в Webkit (chrome), но не в Firefox, где второй промежуток упадет, вы знаете, почему?

<div id="sbar">
    <span id="status">Some Text</span>
    <span id="mlog" style="float: right;">Some text in the right</span>
</div>

Answer 1

Попробуйте поменять два пролета.

<div id="sbar">
    <span id="mlog" style="float: right;">Some text in the right</span>
    <span id="status">Some Text</span>
</div>

Answer 2

Может предложить другое решение, не обращая внимания. Работает в разных браузерах

<div id="sbar" style="position:relative;">
    <span id="status">Some Text</span>
    <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span>
</div>

Answer 3

Этот код будет хорошо работать в Webkit (хром), но не в Firefox, где второй промежуток упадет, знаете ли почему?

Да. Поведение плавающего элемента будет опускаться ниже неплавающего элемента, который стоит перед ним в коде. Другие уже дали вам исправления.

Answer 4

Этот код будет хорошо работать в Webkit (chrome), но не в Firefox

WebKit не так. Стандарт определяет, что плавающий вправо должен идти вниз по строке.

Для объяснения см. CSS: проблема с тремя столбцами .

Answer 5

Да ... реверс делает работу с плавающей точкой, вам нужно расположить элементы как стек, который может подобрать браузер -

так, когда плавающий влево

A

B

C

будет плавать до ABC -

A

AB

ABC

когда все всплывающее правильно даст вам CBA, как в

A * * тысяча двадцать-один

BA

CBA

Я видел, как это реализовано в Firefox, не проверял webkit. Вы можете быть в безопасности с этим, хотя.