如何清除：兩者;是否正確？

<style> 
.cl {clear:both;} 
.block {} 
.left {float:left;} 
</style> 

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
    <div class="cl"></div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
    <div class="cl"></div> 
</div>

是否可以避免在每個.block的末尾添加<div class="cl"></div>？如何清除：兩者;是否正確？

來源

2011-09-07 Kirzilla

您是否嘗試過使用類似'.block：後{明確：既} '？我從來沒有嘗試過使用之前或之後的選擇器，所以我不知道它們是如何工作的。 – animuson

在.block上嘗試使用overflow:hidden我知道有時會修復它。

來源

2011-09-07 15:10:44 brenjt

你可以這樣做：

<style> 
    br {clear:both;} 
</style> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div> 
<br/>

第二個選項回覆：@animuson評論

<style> 
    .container br {clear:both;} 
</style> 
<div class="container"> 
    <div class="block"> 
     <div class="left">Title 2</div> 
     <div class="left">Value 2</div> 
    </div> 
    <br/> 
</div>

來源

2011-09-07 15:11:56 Eonasdan

你真的應該使用類名作爲break，所以它不適用於文檔中的* all *中斷。但是，如果你這樣做，這與OP的例子沒有什麼不同。 – animuson

是的，這就是爲什麼我在元素級別做到這一點的原因 – Eonasdan

有兩種共同解決這個問題。

添加overflow: hidden到浮動元素的父（因此在這種情況下，.block）。
使用「clearfix」：http://nicolasgallagher.com/micro-clearfix-hack/

一些更多的信息在這裏：Is clearfix deprecated?

使用clear: both一個很好的時機是當你已經有可用的元素添加它。

例如，浮動列的常見情況有一個頁腳：http://jsfiddle.net/thirtydot/vhBkM/

來源

2011-09-07 15:15:02 thirtydot

+1：使用'overflow：hidden'強制浮動元素保留在塊元素中。「明確」是這項工作的錯誤工具。 –

@SørenLøvborg爲什麼這份工作「明確」錯了？真正的學習經驗問題。 – Eonasdan

@Eonasdan：它有效，但有更清潔的替代品。 'overflow：hidden'只涉及向CSS添加'overflow：hidden'，這比在HTML中添加一個額外的元素更清潔，僅僅是爲了清除浮動。而clearfix只涉及在HTML中添加一個額外的類，它比添加額外的元素更清晰。 – thirtydot

你不應該需要<div class="cl"></div>的div在所有。只需將clear: both放在塊div上即可。

例子：http://jsfiddle.net/mKazr/

CSS

.block { 
    clear: both; 
    overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */ 
} 
.left { float:left; }

HTML

<div class="block"> 
    <div class="left">Title 1</div> 
    <div class="left">Value 1</div> 
</div> 
<div class="block"> 
    <div class="left">Title 2</div> 
    <div class="left">Value 2</div> 
</div>

編輯：添加代碼

來源

2011-09-07 15:17:41 Michael

這也是我最初的想法。雖然沒有測試過。 – diggersworld

如何清除：兩者;是否正確？

回答

相關問題