Why Does `float: right` Reverse the Order of Inline Elements?

Float:right Reverses Order of Spans: A CSS Dilemma

When dealing with inline elements and floating, an unexpected issue arises: the order of elements flips in the browser. This observation is typically witnessed with the judicious use of the float property. Let's delve into a specific situation to illustrate the problem.

Consider the following HTML structure:

<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>

By applying the following CSS rules, the intention is to float the "button" spans to the right:

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

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

However, in the browser, the "button" spans disappointingly render in the reverse order, resulting in an unexpected display of "Import Export Settings" instead of the intended sequence.

The CSS Fix: Embracing Flexibility

To resolve this perplexing issue, CSS offers a versatile approach: either reverse the order of the floated elements in the HTML or introduce a containing element and float that element instead. Both solutions effectively address the order reversal without altering the existing HTML structure.

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