需要说明为什么将右浮动元素作为div中的第一个元素来解决新行问题

Question

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. 我有一个包含几个元素的div，最后一个元素是一个按钮，我希望距div的右边缘10个像素。 The div and the button have fixed widths. div和按钮的宽度固定。 The button has display:inline (noting that floated elements get block behavior). 该按钮具有display：inline（注意，浮动元素具有块行为）。 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. 问题是即使div中有足够的空间，也要使按钮保持正确的浮动状态，这总是将按钮置于新行中。

The simple solution I found was to place the button as the first element in the div. 我发现的简单解决方案是将按钮放置为div中的第一个元素。 It worked in IE6, 7, 8 and FF. 它适用于IE6、7、8和FF。 I am wondering if this is expected behavior in the css standards? 我想知道这是否是CSS标准中的预期行为？

None of the CSS books I have mentioned this little trick or it didn't click with me. 我没有提到任何CSS技巧，或者没有被我接受。 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 另外：容器div正在使用此CSS来包含子代

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

Answer 1

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 浮动渲染http://media.banzaimonkey.net/images/forums/floats.png

Analysis 分析

In the first example, the p1 is floating. 在第一个示例中， p1是浮动的。 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. p1向右移动，但p1的下边缘不阻挡p2，因此p2向上滑动以填充空白区域。

In the second example, the p3 is floating. 在第二个示例中， p3是浮动的。 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. p3向右移动，但是段落的下边缘不与父div的下边缘抵挡，因此边框向上滑动以填充空白区域。 This results in the paragraph appearing outside of the div. 这导致该段落出现在div之外。

In the third example, the p3 is floating again. 在第三个示例中， p3再次浮动。 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. 它像以前一样向右移动，但是当我们在p3和父级的关闭div之间的div添加clear时，清除的div阻止父div的下边缘。

So what's happening here? 那么这是怎么回事？

What float actually does is allow elements below it to flow around its content. float实际上所做的是允许其下面的元素围绕其内容流动。 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. 如果第一个示例中的p1具有足够的内容来填充父容器的整个宽度，则不会看到任何浮动。 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? 那么，为什么第3段不浮动到父容器的顶部？ Because paragraphs 1 and 2 are filling the full width of the parent container. 因为第1段和第2段填充了父容器的整个宽度。 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 两个浮标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. 另外，如果你想父包含花车，你就必须添加一个clear家长的结束标记之前。

Answer 2

Things are kinda odd when the browser's in quirks mode, at least in IE. 当浏览器至少在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. 如果您指定了严格的DTD，则可以按预期在IE 8，FF 3.6.4和Chrome 5中正常运行。（无论如何，它在Chrome中都可以正常工作，但是添加文档类型并没有什么坏处。） IE 6或7-我不使用它们，并且不能不购买更多计算机或使这台计算机不稳定，因此我不会故意支持它们。

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. 如果没有doctype，则该按钮将出现在IE 8的下一行中。一旦在页面顶部添加<!DOCTYPE html> ，它就会出现在同一行中。

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. IE的较旧版本不了解HTML 5，因此上面的doctype行必须是完整的HTML 4严格标准，或者也许是过渡版本。 Even then it may be iffy in older browsers, and like i said, i can't test. 即便如此，在较旧的浏览器中也可能有些无聊，就像我说的那样，我无法测试。

Answer 3

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. 按钮与div元素内的内容不内联的原因是因为div内的元素需要固定的宽度。

DEMO 演示

需要说明为什么将右浮动元素作为div中的第一个元素来解决新行问题

问题描述

3 个解决方案

解决方案1
7 2010-08-14 00:48:53

Example Code 范例程式码

Render 渲染

Analysis 分析

So what's happening here? 那么这是怎么回事？

Summary 摘要

解决方案2
0 2010-08-13 20:23:18

解决方案3
0 2010-08-13 20:59:38

需要说明为什么将右浮动元素作为div中的第一个元素来解决新行问题

问题描述

3 个解决方案

解决方案1 7 2010-08-14 00:48:53

Example Code 范例程式码

Render 渲染

Analysis 分析

So what's happening here? 那么这是怎么回事？

Summary 摘要

解决方案2 0 2010-08-13 20:23:18

解决方案3 0 2010-08-13 20:59:38

解决方案1
7 2010-08-14 00:48:53

解决方案2
0 2010-08-13 20:23:18

解决方案3
0 2010-08-13 20:59:38