Need explanation why putting right floated element as first element in div fixes the new line issue_问答_开发者

I have a div with a few elements and the last element is a button which I wanted to be 10 pixels from the div's right edge. The div and the button have fixed widths. The button has display:inline (noting that floated elements get block behavior). The problem was giving the button a right float always put 开发者_开发技巧the button in a new line even though there was plenty of space in the div.

The simple solution I found was to place the button as the first element in the div. It worked in IE6, 7, 8 and FF. I am wondering if this is expected behavior in the css standards?

None of the CSS books I have mentioned this little trick or it didn't click with me. I appreciate if someone can reference a book or a site which explains this behavior.

Addition: Container div's are using this css to contain children

.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Floats are very strange because they don't behave predictably with respect to the box model. You might expect floats to stay inside their parents, but they don't. Frankly, float behavior is very unintuitive. In the examples below, the parent is teal and the float is purple.

Example Code

<!DOCTYPE HTML>
<html><head><title>Float Tests</title></head>
<style>
.parent { border: 1px solid #00ddaa; margin-bottom: 5em; }
.float { border: 1px solid #dd00bb; float: right; }
.clear { clear: both; }
p { margin: 0; }
</style>
<body>

<div class="parent">
<p class="float">Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div></div>
</div>

<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div></div>
</div>

<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div class="clear"></div>  <!-- We're clearing this time -->
</div>

</body></html>

Render

Float Render http://media.banzaimonkey.net/images/forums/floats.png

Analysis

In the first example, the p1 is floating. p1 moves to the right but the p1's lower edge does not block against the p2, so p2 slides upward to fill in the empty space.

In the second example, the p3 is floating. p3 moves to the right but the paragraph's lower edge does not block against the parent div's lower edge, so the border slides upward to fill the empty space. This results in the paragraph appearing outside of the div.

In the third example, the p3 is floating again. It moves to the right as it did previously, but when we add clear to the div between the p3 and the parent's closing div, the cleared div blocks against the parent div's lower edge.

So what's happening here?

What float actually does is allow elements below it to flow around its content. Quirkily, it also allows containing blocks to collapse around it.

If p1 in our first example had enough content to fill the full width of the parent container, we would not see any floating taking place. In order for floating to happen, the width of the floating block has to be limited to allow for other elements to spill into the space it would otherwise occupy.

So why doesn't paragraph 3 float to the top of the parent container? Because paragraphs 1 and 2 are filling the full width of the parent container. If you want to have both the second and third paragraphs on the same line, you will have to float the second paragraph to the left, like so:

<div class="parent">
<p>Paragraph 1</p>
<p class="float" style="float: left;">Paragraph 2</p>  <!-- Float left -->
<p class="float">Paragraph 3</p>
<div class="clear"></div>
</div>

Which renders as:

Two Floats http://media.banzaimonkey.net/images/forums/floats2.png

Summary

The rule of thumb is that floating only allows blocks below the floated element(s) to flow. For two items to share the same line, you'll have to float twice (once left, once right), or place your float first. Also, if you want the parent to contain the floats, you'll have to add a clear before the parent's closing tag.

The reason that the button is not inline with the content inside the div element is because you need a fixed width on the elements inside the div.

DEMO

Things are kinda odd when the browser's in quirks mode, at least in IE. If you specify a strict DTD, things work as you'd expect in IE 8, FF 3.6.4, and Chrome 5. (It worked anyway in Chrome, but adding the doctype didn't hurt.) I can't say about IE 6 or 7 -- i don't use them, and can't without buying more computers or making this one unstable, so i don't intentionally support them.

The test page i used:

<div style="width: 300px; border: 1px solid black">
 Some text
 <input type="button" 
       style="float: right; width: 50px; margin-right: 10px"
       value="test">
</div>

Without a doctype, the button appears on the next line in IE 8. Once i add <!DOCTYPE html> at the top of the page, it appears on the same line.

Older versions of IE don't know about HTML 5, though, so the doctype line above would have to be the full HTML 4 strict or maybe transitional one instead. Even then it may be iffy in older browsers, and like i said, i can't test.