The interaction between floating and non-floating elements

Question

Consider the following code:

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;
}

Conclusion:

If we change width:autoto, for example, width:20%(to #inner2) we get the following result:

Why does it #inner2fall under #inner1? There is enough space close by #inner1!

What is the difference between width:autoand width:xx%?

---

In addition, I would like to clarify the lack of a right edge #inner1and a left margin #inner2in the first example. This is a collapse effect, isn't it? Why is this happening here?

Answer 1

Float: none affect your size.

The difference between cars and%

clear: float: none

2 :

float:none;

  float:left;