浮动和“非浮动”元素之间的相互作用

Question

请考虑以下代码：

HTML：

<div class="wrapper">
  <div id="inner1">
     LINE1  
  </div>
  <div id="inner2">
    LINE2 
  </div>
</div>

CSS：

.wrapper{
    width:400px;
    overflow: auto;
    background-color: #0FC;
}
#inner1{
    float: left;
    width: 40%;
    margin-right: 5%;
    margin-left: 5%;
    background-color: #69C;
}
#inner2{
    float:none;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #C09;
}

输出：

如果我们将width:auto更改为例如width:20%（在#inner2上）我们得到以下输出：

为什么#inner2在#inner1下崩溃？ #inner1旁边有足够的空间！

width:auto和width:xx%之间有什么区别？

---

另外，我想解释第一个例子中#inner1的右边距和#inner2左边距的缺失。这是利润率下降的影响，不是吗？为什么会在这里发生？

Answer 1

浮动：无影响你的尺寸。

Difference between auto and %

Using clear:both instead of float:none

从内部改变内部2：

float:none;

到

  float:left;