เหตุใดความสูงของ div พาเรนต์จึงเป็นศูนย์เมื่อมันลอยเด็ก

ฉันมีสิ่งต่อไปนี้ใน CSS ของฉัน ระยะขอบ / การพายเรือ / เส้นขอบทั้งหมดจะถูกรีเซ็ตเป็น 0

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

ตอนนี้เมื่อฉันเขียน HTML ของฉันเป็น

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

หน้าที่แสดงผลอย่างถูกต้อง อย่างไรก็ตามเมื่อฉันตรวจสอบองค์ประกอบdiv#wrapperจะแสดงว่า0pxสูง ฉันคาดว่ามันจะขยายไปจนจบdiv.contentและdiv.lbar... ทำไมสิ่งนี้ถึงเกิดขึ้น?

อีกครั้งหน้าแสดงผลได้ดี พฤติกรรมนี้ทำให้ฉันงง

เนื้อหาที่ลอยอยู่ไม่ส่งผลต่อความสูงของคอนเทนเนอร์ องค์ประกอบไม่มีเนื้อหาที่ไม่ลอย (ดังนั้นไม่มีสิ่งใดหยุดความสูงของคอนเทนเนอร์ให้เป็น 0 ราวกับว่ามันว่างเปล่า)

การตั้งค่าoverflow: hiddenในภาชนะที่จะหลีกเลี่ยงโดยการสร้างใหม่บริบทการจัดรูปแบบบล็อก ดูวิธีการบรรจุลอยสำหรับเทคนิคอื่น ๆ และมีการลอยสำหรับคำอธิบายว่าเหตุใด CSS จึงได้รับการออกแบบด้วยวิธีนี้

โดยปกติfloatจะไม่นับรวมในเค้าโครงของพ่อแม่

หากต้องการป้องกันให้เพิ่มoverflow: hiddenไปยังผู้ปกครอง

ฉันไม่แน่ใจว่านี่เป็นวิธีที่ถูกต้อง แต่ฉันแก้ไขได้โดยการเพิ่มdisplay: inline-block;ใน wrapper div

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