Question

以下是代码：

 <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，一切都按预期工作。

Answer 1

浮动元素从normal document flow:

中删除

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

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

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

如果您对学习具体细节感兴趣，Visual Formatting Model中有关浮动的部分会很有帮助

^{参考文献：Section 9.4, Floats, CSS 2.1 Specification}

Answer 2

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

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

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

Answer 3

是。这是正常的和预期的。如果你想要第一个，你需要将它们都浮动。

Answer 4

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

Css浮动的缺点

4 个答案: