Interacción entre elementos flotantes y elementos “no flotados”

Considere el siguiente código:

HTML:

LINE1
LINE2

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

Salida:

introduzca la descripción de la imagen aquí

Si cambiamos el width:auto a, por ejemplo, el width:20% (en #inner2 ) obtenemos el siguiente resultado:

introduzca la descripción de la imagen aquí

¿Por qué #inner2 debajo de #inner1 ? ¡Hay suficiente espacio al lado de #inner1 !

¿Qué hace esta diferencia entre width:auto y width:xx% ?


Además, me gustaría una explicación de la falta de margen derecho de #inner1 y margen izquierdo de #inner2 en el primer ejemplo. Esto es un efecto de colapso de margen, ¿no es así? ¿Por qué sucede aquí?

El flotador: ninguno está afectando tus dimensiones.

Diferencia entre auto y%

Usando clear: ambos en lugar de float: none

cambiar el interior 2 de:

 float:none; 

a

  float:left;