Question

我有一个带有几个元素的div，最后一个元素是一个按钮，我想要距div的右边缘10个像素。 div和按钮具有固定的宽度。该按钮具有显示：内联（注意浮动元素获得阻止行为）。问题是给按钮一个右浮动总是将按钮放在一个新行中，即使div中有足够的空间。

我找到的简单解决方案是将按钮作为div中的第一个元素。它适用于IE6,7,8和FF。我想知道这是否是css标准中的预期行为？

我没有提到过这个小技巧的CSS书籍，也没有点击过我。如果有人可以参考解释此行为的书籍或网站，我将不胜感激。

增加： 容器div正在使用此css来包含子项

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

Answer 1

浮点数很奇怪，因为它们在box model方面的行为不可预测。你可能会认为花车留在父母身边，但他们没有。坦率地说，浮动行为非常不直观。在下面的示例中，父级是蓝绿色，浮动是紫色。

示例代码

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

渲染

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

分析

在第一个示例中， p1 是浮动的。 p1向右移动，但p1的下边缘不会阻挡p2，因此p2向上滑动以填充空白区域。

在第二个示例中， p3 是浮动的。 p3向右移动但段落的下边缘不会阻挡父div的下边缘，因此 border 向上滑动以填充空白区域。这导致段落出现在div之外。

在第三个示例中， p3 再次浮动。它像以前一样向右移动，但是当我们在p3和父级的结束clear之间向div添加div时，清除的div阻止了父级div的下缘。

那么这里发生了什么？

float实际上做的是允许元素以流动其内容。奇怪的是，它还允许包含块在其周围坍塌。

如果我们的第一个示例中的p1有足够的内容来填充父容器的整个宽度，我们就不会看到任何浮动发生。为了实现浮动，必须限制浮动块的宽度，以允许其他元素溢出到原本占据的空间。

那么为什么第3段没有浮动到父容器的顶部？因为段落1和2填充了父容器的整个宽度。如果你想在同一行上同时包含第二段和第三段，你必须将第二段浮动到左边，如下所示：

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

呈现为：

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

摘要

经验法则是浮动只允许浮动元素下面的块流动。要共享同一条线的两个项目，您必须浮动两次（一次左侧，一次右侧），或者先放置浮动。此外，如果您希望父级包含浮点数，则必须在父级的结束标记之前添加clear。

Answer 2

当浏览器处于怪癖模式时，事情有点奇怪，至少在IE中。如果你指定一个严格的DTD，那么你可以按照IE 8，FF 3.6.4和Chrome 5的方式工作。（无论如何它在Chrome中都有效，但添加doctype并没有受到伤害。）我不能说IE 6或7 - 我不使用它们，不能没有购买更多的计算机或使其不稳定，所以我不会故意支持它们。

我使用的测试页面：

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

如果没有doctype，该按钮将显示在IE 8的下一行。一旦我在页面顶部添加<!DOCTYPE html>，它就会显示在同一行。

旧版本的IE不了解HTML 5，因此上面的doctype行必须是完整的HTML 4严格或可能过渡版。即便如此，在旧版浏览器中也可能是不确定的，就像我说的那样，我无法测试。

Answer 3

按钮不与div元素内容内联的原因是因为你需要div内元素的固定宽度。

DEMO

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

3 个答案:

示例代码

渲染

分析

那么这里发生了什么？

摘要