0

代码如下：

 <style>
   .thumbnail
   {
   float:left;
   width:110px;
   height:90px;
   margin:5px;
  }
</style>
  <body>
  <img src="klematis_small.jpg" style="width:107px; height:140px">
  <img class="thumbnail" src="klematis_small.jpg" style="width:107px; height:150px">

令人困惑的是为什么第二个 img 在第一个 img 之前浮动出现。如果我们将第一个 img 放在第二个 img 上，一切都按预期工作。

4

4 回答 4

1

浮动元素从正常的文档流中取出：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，浮动旁边创建的当前和后续行框会根据需要缩短，以便为浮动的边距框腾出空间。

只有行框（行内格式化上下文中的元素）才尊重浮动，通常是文本形式。还要记住，当与流内块级元素碰撞时，浮动将始终位于顶部（按堆叠顺序），但它会出现在所有行框的后面。

浮动的内容被堆叠，就好像浮动生成了新的堆叠上下文一样，除了任何定位元素和实际创建新堆叠上下文的元素都参与浮动的父堆叠上下文。浮动可以与正常流中的其他框重叠（例如，当浮动旁边的正常流框具有负边距时）。发生这种情况时，浮动将呈现在未定位的流入块的前面，但在流入的内联后面。

如果您有兴趣了解具体细节， Visual Formatting Model中关于浮点数的部分会很有帮助

参考：第 9.4 节，浮点数，CSS 2.1 规范

于 2013-05-10T20:31:02.643 回答
1

您从W3Schools复制示例但未阅读：

元素如何浮动 元素水平浮动，这意味着一个元素只能向左或向右浮动，不能向上或向下浮动。

浮动元素将尽可能向左或向右移动。通常这意味着一直到包含元素的左侧或右侧。

于 2013-05-10T20:33:30.450 回答
0

是的。这是正常的，也是意料之中的。如果您首先想要第一个，则需要将它们都浮动。

于 2013-05-10T20:32:50.713 回答
0

我不会使用浮点数，只需使用 display: inline-block; 它将以与编写代码的顺序完全相同的顺序显示您的项目。

于 2013-05-10T20:42:21.173 回答