Márgenes del elemento ignorados después del elemento flotante

Question

Tengo un " borrado " <hr> etiqueta con márgenes superior e inferior. Sin embargo, después de dos elementos flotantes como columnas, se ignora el margen superior y la línea se encuentra justo debajo del texto.

CSS:

hr {
    width: 100%;
    height: 1px;
    border: 1px;
    background-color: #d3d7cf;
    color: #d3d7cf;
    clear: both;
    margin: 16px auto;
}
.column {
    text-align: center;
    float: left;
    margin-right: 16px;
    width: 200px
}

HTML:

<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>

Descubrí que puedo envolver las columnas en un div con overflow: hidden, pero ¿hay alguna solución en la que no necesite agregar marcas adicionales al HTML?

Answer 1

Agregue margen inferior: 16px a la columna & "; columna &"; clase.

O agregue relleno a las columnas (obviamente no si está usando bordes en la clase de columna).

Answer 2

Agregue float:left al estilo HR.

Esto debería hacer que el DIV juegue en el mismo flujo que los <=> flotantes y aplique el margen superior que le faltaba en la primera versión de su CSS.