css float left yapınca arkaplanın kaybolması sorunu

Tarih: 09:27 Yazar: Unknown 0 yorum

Merhaba arkadaşlar kodlarımızda genelde float:left yani sola yasla yada float:right sağa yasla gibi komutlar yazarız. eğer bu özellikleri verdiğmiz divin dışında bir div varsa arkaplanının kaybolduğunu göreceksiniz. bunun nedeni float left veya right dediğimizde height:auto; kodumuz çalışmıyor şimdi çözümüne bakalım.

Hatalı CSS kodumuz

 .ust_div {  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }  

html kodumuz

 <div class="ust_div">  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 </div>  

Yuardaki kodu çalıştırdığınızda hatalı çıkacakdır doğru css kodumuz :

Doğru CSS Kodu

 .ust_div {  
 overflow:hidden; /* overflow ekleyerek sorunu düzelttik */  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }