使用：後自行清除div。這是正確的嗎？

我有以下HTML：使用：後自行清除div。這是正確的嗎？

<div class="selfClear" style="float: left; border: 1px solid black;"> 
     ...floated stuff in here... 
</div> 
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>

我想那裏是div和span之間的差距10px的每保證金頂。但是，由於上面的div浮動，它不會以這種方式呈現。確定清晰的DIV。要做到這一點通過純CSS，它出現一個shoudl使用「：」後插入的內容，然後設置爲清除方法：

.selfClear:after { 
content: "."; 
display: block; 
height: 0px; 
clear: both; 
visibility: hidden; 
} 
.selfClear { 
    display: inline-block; 
}

然而，這並不完全做我覺得應該做的事。如果我沒有包含高度/可見性樣式，以便可以在插入時看到該時間段，我會發現它實際上是在div內部（黑色邊框包圍它）渲染的，而不是在div之後（因此它介於div和跨度）。我誤解這應該如何工作？

編輯：

這裏有一個簡單的例子：

CSS：

#theDiv { 
border: 1px solid green; 
} 

#theDiv:after { 
content: "."; 
} 

#theOtherDiv { 
border: 1px solid orange; 
}

HTML：

<div id="theDiv"> 
    Hello 
</div> 
<div id="theOtherDiv"> 
    World 
</div>

這最終將一段時間後 '你好'，而不是之後div。

看來：after和：before實際上被追加到元素的CONTENTS中，而不是元素本身。那是對的嗎？

來源

2009-10-09 DA.

是的，它附加到所選元素的內容。你可以嘗試包裝div，然後在wrapper div後面添加，但是這首先破壞了使用的全部目的：。

來源

2009-10-09 16:26:39 CodeJoust

！我不得不說他們爲此選擇了一個壞名字。它應該在內容或其他方面被正確地調用。 ;） – 2009-10-09 16:38:38

我會建議使用clearfix--它簡單得多，你只需設置一個clearfix類。

請參閱this example。

來源

2009-10-09 16:26:39

這是幾乎相同的事情，但與包裝元素，對不對？因此，如果我要添加更多的HTML，我不妨使用舊的後退'空格'設置清除。這很好。我只是希望以CSS爲中心的方法。確實是 – 2009-10-09 16:58:42

你也可以嘗試將封閉div設置爲'overflow：auto'。那在各地都有效

來源

2009-10-09 17:54:35

使用：後自行清除div。這是正確的嗎？

回答

相關問題