浮动查询

Question

请考虑以下代码：

<div style="width:250px;background:red;">
  line1
  <div  style="width:auto;background:green;margin-left:10%;margin-right:10%;" >
     line2
  </div>
 </div>

及其结果：

以上内容对我来说完全可以理解。

现在，这段代码：

<div style="width:250px;background:red;">
line1
<div  style="float:left;width:auto;background:green;margin-left:10%;margin-right:10%;">
     line2
</div>
 </div>

及其结果：

我无法解释两件事。第一个：为什么内部div会改变位置？由于浮动不会影响以前的元素，我希望文本“line1”不会在绿色div旁边换行！第二个：浮动属性不接受宽度：自动？为什么绿色div会缩小？

谢谢

Answer 1

文档流程是指在垂直方向上呈现的块元素，在水平方向上呈现的内联元素，以及按照它们遇到的顺序呈现的所有元素。

---

摘自w3.org - Floats and clearing

<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>

以下是该文档的屏幕截图，其中包含覆盖图，显示p元素生成的两个块框和em元素生成的内联框。

---

Float 改变元素在文档流中呈现的方式。与绝对位置不同，它不会完全从流中移除元素。它基本上使它类似于内联块元素，但需要注意的是它将尽可能“浮动”在指示方向上的其他非浮动元素上。

因此，line2元素不会导致换行，并且优先于line1上的渲染。因此，你最终会在line1之前找到一个line2元素。

至于宽度，因为line2现在是inline-ish，它的宽度只是包含内容。使用自动时，它对此没有影响。

然而，有一点需要注意。如果宽度：200px;然后在第2行上使用，这会使浮动被放置在下一行，因为它“尽可能地离开”，因为没有足够的空间来浮动前一行中200px元素（边距+ 20％）。因为line1已经存在，并且包含块（50px）的边距为200px和20％，所以line2将无法放在同一条线上。

fiddle for image