Mengapa orangtua div ketinggian nol ketika anak-anak melayang

Saya memiliki yang berikut di CSS saya. Semua margin / bantalan / batas secara global diatur ulang ke 0.

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

Sekarang ketika saya menulis HTML saya sebagai

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

halaman dirender dengan benar. Namun, ketika saya memeriksa elemen, div#wrapperditampilkan sebagai 0pxtinggi. Saya akan berharap itu akan berkembang sampai akhir div.contentdan div.lbar... Mengapa ini terjadi?

Lagi-lagi, halaman ini membuat baik-baik saja. Perilaku ini hanya membingungkan saya.

Konten yang mengambang tidak mempengaruhi ketinggian wadahnya. Elemen tidak mengandung konten yang tidak mengambang (jadi tidak ada yang menghentikan ketinggian wadah menjadi 0, seolah-olah kosong).

Pengaturan overflow: hiddenpada wadah akan menghindarinya dengan membuat konteks pemformatan blok baru . Lihat metode untuk mengandung pelampung untuk teknik lain dan berisi pelampung untuk penjelasan tentang mengapa CSS dirancang dengan cara ini.

Biasanya, floats tidak dihitung dalam tata letak orang tua mereka.

Untuk mencegahnya, tambahkan overflow: hiddenke induknya.

Saya tidak yakin ini adalah cara yang benar tetapi saya menyelesaikannya dengan menambahkan display: inline-block;div pembungkus.

#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%;
}