是否可以使用<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？

回答

相關問題