Nasıl temizlenir: ikisi de; doğru şekilde?

Question

<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> 

her .block sonunda <div class="cl"></div> eklemekten kaçının mümkün mü? Ben bazen bunu düzeltmek biliyorum .block üzerinde overflow:hidden kullanılarak

Answer 1

deneyin.

Answer 2

Bunu yapabilirdi:

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

ikinci seçenek re:

<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> 

Answer 3

açıklama @animuson Bu sorunun iki ortak çözümü vardır.

1. (.block, bu durumda bu yüzden) süzülüyor elemanların ebeveyne overflow: hidden ekleyin.
2. Kullanımı "Clearfix": Burada http://nicolasgallagher.com/micro-clearfix-hack/

Bazı daha fazla bilgi: Eğer zaten onu eklemek kullanılabilir bir öğe olduğunda Is clearfix deprecated?

---

clear: both kullanmak için iyi bir zamandır. Örneğin

, bir altbilgi ile süzülüyor kolonların sık karşılaşılan durum: http://jsfiddle.net/thirtydot/vhBkM/

Answer 4

Sen hiç <div class="cl"></div> div'leri gerekmez. Sadece blok bloğuna clear: both koyun.

Örnek: 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> 

Düzenleme: eklenen kod