是否可以用 <hr /> 覆盖 clearfix？

Question

目前，我有一个包含大量内容的 clearfix。我有多组图像在左边，文本在右边，每组下面都有一个 <hr />。唯一的问题是有时我没有足够的文本来平衡图像，因此 <hr /> 被拉到与图像内联。我需要所有 <hr /> 都没有 clearfix，这可能吗？

这是我的 clearfix：

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

<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;
}

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

这就是我的 HTML 现在的样子。

Answer 1

只需添加一个包含 clear: both; 的 "clearing" class 到 hr:

（或将 clear: both; 添加到 hr 元素本身）

img {
  float:left; 
}

.clearing {
  clear: both;
}

<img src="http://placehold.it/300x200">
<hr class="clearing">

是否可以用 <hr /> 覆盖 clearfix？

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

html

css

clearfix