Çocukları kaydırdığında üst div yüksekliği neden sıfır?

CSS'mde aşağıdakiler var. Tüm kenar boşlukları / doldurmalar / sınırlar genel olarak 0'a sıfırlanır.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

Şimdi HTML'mi şu şekilde yazdığımda

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

sayfa doğru şekilde görüntüleniyor. Ancak elementleri incelediğimde yüksek div#wrapperolarak gösteriliyor 0px. Sonuna kadar genişlemesini beklerdim div.contentve div.lbar... Bu neden oluyor?

Yine, sayfa iyi işliyor. Bu davranış beni şaşırtıyor.

Yüzen içerik, kabının yüksekliğini etkilemez. Öğe, kayan olmayan içerik içermez (bu nedenle, hiçbir şey kap yüksekliğinin boşmuş gibi 0 olmasını durdurmaz).

overflow: hiddenKonteyneri ayarlamak , yeni bir blok biçimlendirme bağlamı oluşturarak bunu önleyecektir . Bkz yüzen içeren için yöntemler diğer teknikler için ve yüzer içeren CSS bu şekilde tasarlanmıştır nedeni hakkında bir açıklama.

Normalde, floatebeveynlerinin düzeninde sayılmaz.

Bunu önlemek overflow: hiddeniçin ebeveyne ekleyin .

Bunun doğru bir yol olduğundan emin değilim ama bunu display: inline-block;wrapper div'e ekleyerek çözdüm.

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}