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

目前，我有一个包含大量内容的clearfix。我在左边有几组图像，右边有<hr />。唯一的问题是，有时我没有足够的文本来平衡图像，所以<hr />与图像内嵌。我需要所有的<hr />免费的clearfix，这是可能的吗？是否可以使用<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看起来像现在。

来源

2017-01-12 jonbon

欢迎到StackOverflow，你的问题sh应该包含一个最小化，完整和可验证的例子，[这里是如何]（http://stackoverflow.com/help/mcve）。 – hungerstar

您能否请求包含clearfix和'

'的HTML。 – DanielGibbs

@DanielGibbs clearfix已经包括在内，但我也为你添加了hr。 – jonbon

只需添加包含clear: both;到hr一个 “清” 级：

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

img { 
 
    float:left; 
 
} 
 

 
.clearing { 
 
    clear: both; 
 
}

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

来源

2017-01-12 21:46:07 Johannes

还有一些额外的小时也搞乱了这个，我用这个+ a .specific-place hr {}，它修复了它 – jonbon

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

回答

相关问题