Ebeveyn divunun çerçevesinin içinde yüzen div nasıl tutulur?

Question

Float: left ile başka birçok div içeren bir divum var. Şimdi hepsi etrafında bir çerçeve istiyorum, bu yüzden üst div üzerinde bir sınır koymak, ama yüzen olanları çerçevenin dışına "akış" ...

CSS:

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

Html:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
</div> 

Ebeveyn çerçevesinin içinde tutmak için (CSS'de) neler yapabilirim?

Answer 1

Ebeveyniniz <div> için overflow: hidden eklemek - http://jsfiddle.net/5AVA8/

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
    overflow: hidden; 
} 

Answer 2

Sen 'şamandıra temizlemek' olmalı 'şamandıra temizleme' çeşitli yöntemler vardır. aşağıdaki gibi bazı çözümler CSS yalnızca (ekstra işaretlemeyi ekler çünkü bazı insanlar tarafından sevilmeyen) benim tercih edilen çözüm, bir 'takas div' eklemektir dahil, çalışır:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
    <div style="clear:both"></div> 
</div> 

son satırından ikinci bakınız. Şamandıraları temizlemiyorsunuz.

Answer 3

Şamandıraları temizlemiyorsunuz. Kodunuzu bu şekilde değiştirirseniz, sorununuzu çözecektir.

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

.clear { 
    clear: both; 
} 

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 

    <div class="clear"></div> 
</div> 

Burada kurdum örneğe bakın - net mülkiyet fazla bilgi için http://jsfiddle.net/spacebeers/RQNDr/

- http://css.maxdesign.com.au/floatutorial/ Sadece berrak div üzerinden bu avantajını ne çıkar dışarı