需要解释为什么将右浮动元素作为div中的第一个元素修复了新行问题 [英] Need explanation why putting right floated element as first element in div fixes the new line issue
问题描述
我有一个包含几个元素的div，最后一个元素是一个按钮，我希望距div的右边缘10个像素。 div和按钮的宽度固定。该按钮具有display：inline（注意，浮动元素具有块行为）。问题是即使div中有足够的空间，也要使按钮正确浮动，以使按钮始终处于新行。
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.
我发现的简单解决方案是将按钮作为div中的第一个元素。它适用于IE6、7、8和FF。我想知道这是否是CSS标准中的预期行为吗？
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?
我都没有提到过这个CSS技巧，或者没有点击我。如果有人可以参考解释这种行为的书或网站，我将不胜感激。
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.
添加：
容器div正在使用此CSS来容纳子对象
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.
<!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>
渲染
浮动渲染http://media.banzaimonkey.net/images/forums/floats.png
在第一个示例中， p1 是浮动的。 p1向右移动，但p1的下边缘不阻挡p2，因此p2向上滑动以填充空白区域。
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.
在第二个示例中， p3 是浮动的。 p3向右移动，但段落的下边缘不与父div的下边缘抵挡，因此 border 向上滑动以填充空白区域。这样会导致该段落出现在div之外。
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.
在第三个示例中， p3 再次浮动。它像以前一样向右移动，但是当我们在p3和父级之间添加 clear 到 div 中时关闭 div ，清除对父 div 的 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.
浮动是什么实际上是允许下方元素绕过其内容。
What float actually does is allow elements below it to flow around its content. Quirkily, it also allows containing blocks to collapse around it.
如果第一个示例中的p1具有足够的内容来填充父容器的整个宽度，我们将看不到任何浮动发生。为了使浮动发生，必须限制浮动块的宽度，以允许其他元素溢出到本应占用的空间中。
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.
所以为什么不第3段是否浮动到父容器的顶部？因为段落1和2填充了父容器的整个宽度。如果要将第二段和第三段都放在同一行，则必须将第二段向左浮动，如下所示：
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>
哪个渲染为：
两个浮动元素http://media.banzaimonkey.net/images/forums/floats2.png
经验法则是，浮动仅允许在下方浮动元素流动。要使两个项目共享同一行，您必须浮动两次（向左一次，一次向右），或者将浮动项放在第一位。另外，如果您希望父母包含浮动货币，则必须在父母的结束标记之前添加 clear 。
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.
这篇关于需要解释为什么将右浮动元素作为div中的第一个元素修复了新行问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
