htmlcssclearfix

Is it possible to overwrite a clearfix with a <hr />?

Currently, I have a clearfix wrapped around a large body of content. I have multiple sets of images on the left and text on the right with a <hr /> under each. The only issue is that sometimes I don't have enough text to balance the image out, and so the <hr /> gets pulled inline with the image. I need all the <hr /> to be free of the clearfix, is this possible?

This is my clearfix:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

The <hr>

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 3px dashed #cacaca;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

My <html>:

<div class="main-wrap">
                   
<div class="clear-fix">
<h2>Title</h2>

<p class="content-image">
    <img src="http://example.jpg">
</p>

<h3>Title</h3>

<p>Example text.</p>
<hr />

<p><img src="http://example.png" /></p>

<h3>Example</h3>

<p>Lots of example text here.</p>

<hr />

This is what my HTML looks like right now.

enter image description here

Solution

  • Just add a "clearing" class that contains clear: both; to the hr:

    (or add clear: both; to the hr element itself)

    img {
  float:left; 
}

.clearing {
  clear: both;
}
    <img src="http://placehold.it/300x200">
<hr class="clearing">