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

【问题标题】：Is it possible to overwrite a clearfix with a <hr />?是否可以用 <hr /> 覆盖 clearfix？
【发布时间】：2017-05-28 03:56:03
【问题描述】：

目前，我有一个围绕大量内容的 clearfix。我在左侧有多组图像，在右侧有多个文本，每个图像下都有一个<hr />。唯一的问题是有时我没有足够的文本来平衡图像，因此<hr /> 被拉到与图像内联。我需要所有的 <hr /> 都没有 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 现在的样子。

【问题讨论】：

欢迎来到 StackOverflow，您的问题应包含一个最小、完整且可验证的示例，here's how。
能否请您提供 clearfix 的 HTML 和有问题的 <hr />。
@DanielGibbs clearfix 已包含在内，但我也为您添加了 hr
hr{clear:both/* or left or right */} css-tricks.com/all-about-floats
@jonbon，你包含了 CSS；请包含 HTML 代码，而不是屏幕截图。

标签： html css clearfix

【解决方案1】：

只需将包含clear: both; 的“清除”类添加到hr：

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

img {
  float:left; 
}

.clearing {
  clear: both;
}

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

【讨论】：

还有一些额外的小时也搞砸了。我使用了这个 + .specific-place hr{} 并修复了它