css – Ajuste de div pequeños en div padre

Tengo dos div con display inline-block para que se muestren uno al lado del otro. Dentro de cada uno de ellos, tengo div más pequeños con float left para que se vayan mostrando a la izquierda. También tengo líneas hr para separar los div entre ellos

Aquí el HTML y CSS

#div1, #div2 {
    border: 1px solid black;
    width: 300px;
    height: 200px;
    display: inline-block;
    /*float: left;*/
}

#div1 div, #div2 div {
    border: 1px solid black;
    /*display: inline-block;*/
    float: left;
    width: 50px;
    height: 25px;
}
.clear {
    clear: left;
}
<div id="div1">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <hr class="clear">
    <div>Div 4</div>
    <div>Div 5</div>
    <div>Div 6</div>
</div>
<div id="div2">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <hr class="clear">
    <div>Div 4</div>
    <div>Div 5</div>
    <div>Div 6</div>
</div>

Primera pregunta. La línea hr tiene un pequeño margen que la separa de los div pequeños de abajo, pero no de los de arriba, ¿por qué me sale pegada la línea a los de arriba y cómo los separo?

Segunda pregunta. Si por ejemplo meto una línea entre los div pequeños div 1 y div 2 o entre div 4 y div 5, ya no tengo los div padres div1 y div2 alineados en la misma línea. Si a los padres les pongo un float left ya no me pasa… ¿se puede hacer lo mismo pero con el display inline block en lugar de usar float left en los padres?

Gracias