Les marges des éléments sont ignorées après l'élément flottant

Question

J'ai une étiquette "effacée" <hr> avec des marges en haut et en bas. Cependant, après deux éléments flottants en tant que colonnes, la marge supérieure est ignorée et la ligne se trouve juste en dessous du texte.

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

J'ai découvert que je peux envelopper les colonnes dans un div avec overflow: hidden, mais est-il une solution où je ne ai pas besoin d'ajouter balisage supplémentaire au HTML?

Answer 1

Ajouter marge inférieure: 16px à la classe "colonne".

Ou ajoutez un remplissage aux colonnes (évidemment pas si vous utilisez des bordures sur la classe de colonnes).

Answer 2

Ajoutez float:left au style HR.

Ceci devrait maintenant faire que le HR joue dans le même flux que le DIV s flottant et appliquer la marge supérieure qui vous manquait dans la première version de votre CSS.