Изменение порядка интервалов с помощью Float:right

В предоставленном HTML-коде диапазоны с классом «button» оформлены с помощью «float: right» », в результате чего они отображаются в порядке, обратном структуре HTML. Можно ли изменить CSS, чтобы сохранить порядок HTML?

Чтобы решить эту проблему, существует два общих решения, которые управляют позиционированием с помощью CSS:

Вариант 1: Обратный порядок HTML

Вместо того, чтобы непосредственно перемещать элементы диапазона, оберните их содержащим элементом и переместите его вправо. Например:

    Settings
    Export
    Import


#buttons {
    float: right;
}

В этом случае элемент div "buttons" со свойством "float: right" охватывает диапазоны кнопок, позволяя им отображаться в правильном порядке.

Вариант 2: Поддерживать порядок HTML

Если сохранение текущего порядка HTML имеет решающее значение, добавьте правила CSS, чтобы явно указать порядок плавающих диапазонов. Используйте свойство «clear», чтобы прервать поток плавающих элементов и заставить их отображаться в исходном порядке HTML:

span.button {
    float: right;
    clear: right;
}

Свойство «clear: right» гарантирует, что любые последующие элементы будут начинаться ниже плавающих интервалов, эффективно сохраняя порядок HTML и выравнивая по правому краю.