Why Does `float: right` Reverse the Order of Spans in HTML?

Float: Right Reversing Order of Spans

Given the HTML markup:

<code class="html"><div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div></code>

applying the CSS:

<code class="css">span.button {
    float: right;
}

span.label {
    margin-left: 30px;
}</code>

results in an unexpected display order in the browser, with the spans displaying as "Import Export Settings" instead of the order in the HTML source.

Solution

To resolve this issue without modifying the HTML, the CSS can be adjusted. One approach is to reverse the order of the right floated elements:

<code class="css">span.button:nth-child(1) {
    float: right;
}

span.button:nth-child(2) {
    float: right;
    margin-right: 5px;
}

span.button:nth-child(3) {
    float: right;
    margin-right: 10px;
}

span.label {
    margin-left: 30px;
}</code>

This solution retains the left floated label element while reversing the order of the right floated buttons, resulting in the desired display order.

The above is the detailed content of Why Does `float: right` Reverse the Order of Spans in HTML?. For more information, please follow other related articles on the PHP Chinese website!