Html 浮动查询

考虑以下代码：

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

第1行
第2行

其结果是：

以上是我完全可以理解的

现在，这个代码：

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

第1行
第2行

其结果是：

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

---

谢谢

A文档流指的是垂直方向的块元素渲染、水平方向的内联元素渲染，以及按遇到的顺序渲染所有元素

---

摘自

这是一个非常简单的文档

它由两段组成

下面是该文档的屏幕截图，其中显示了由

p

元素生成的两个块框和由

em

元素生成的内联框

---

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

因此，line2元素不会产生新行，并且在渲染时优先于line1。因此，在line1之前会出现line2元素

至于宽度，因为line2现在是内联的，所以它的宽度只是包含内容。使用“自动”时，它对此没有影响

然而，有一个警告。如果宽度：200px；在第2行上使用，这将使浮动被放置在下一行上，因为“尽可能左”，因为没有足够的空间浮动前一行中的200px元素（+20%的余量）。因为line1已经存在，并且具有200px和包含块（50px）的20%的余量，line2将无法安装在同一行上

---

糟糕的回答！非常感谢。不过，我认为你犯了一个小错误。20%余量的正确数字是50px而不是40px，因为计算是指包含块的宽度（250px宽）。我是对的还是错的？@ILIAS-这对于250px的宽度是正确的，但是我指的是上一个场景，line2的宽度是200px。这是计算的基础，所以200px的20%是40px：）我也在谈论最后一种情况。我认为边距是指包含块的宽度；就是250px，250px的20%是50px。你同意还是不同意？@ILIAS-事实上，这是一个包含块。这是50像素，每面25像素，我将对帖子进行编辑。

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