Поля элемента игнорируются после всплывающего элемента

Question

У меня есть «очищенный» тег <hr> с полями сверху и снизу. Однако после двух плавающих элементов в виде столбцов верхнее поле игнорируется, и строка располагается прямо под текстом.

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/>

Я обнаружил, что могу обернуть столбцы в div с помощью overflow: hidden, но есть ли решение, в котором мне не нужно добавлять дополнительную разметку в HTML?

Answer 1

Добавьте margin-bottom: 16px к классу "column".

Или добавьте отступы к столбцам (очевидно, если вы не используете границы для класса столбцов).

Answer 2

Добавьте float:left к стилю HR.

Теперь это должно заставить HR играть в том же потоке, что и плавающие DIV s, и применить верхнее поле, которое вы пропустили в первой версии вашего CSS.