我有一个带有几个元素的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;
}
浮点数非常奇怪,因为它们对于盒子模型没有预测性.你可能会认为花车留在父母身边,但他们没有.坦率地说,浮动行为非常不直观.在下面的示例中,父级是蓝绿色,浮动是紫色.
<!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的下边缘,因此边框向上滑动以填充空白区域.这导致段落出现在div之外.
在第三个例子中,p3再次浮动.它移动到右侧像以前一样,但是当我们添加clear到divP3和家长的收盘之间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在父级的结束标记之前添加一个浮点数.
