Tại sao div cha mẹ có chiều cao bằng 0 khi nó có con

Tôi có những điều sau đây trong CSS của tôi. Tất cả các lề / paddings / viền được thiết lập lại toàn cầu về 0.

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

Bây giờ khi tôi viết HTML của mình là

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

trang hiển thị chính xác. Tuy nhiên, khi tôi kiểm tra các yếu tố, div#wrapperđược hiển thị là 0pxcao. Tôi đã mong nó sẽ mở rộng cho đến cuối div.contentvà div.lbar... Tại sao điều này xảy ra?

Một lần nữa, trang hiển thị tốt. Hành vi này chỉ làm tôi bối rối.

Nội dung nổi không ảnh hưởng đến chiều cao của thùng chứa. Phần tử không chứa nội dung không nổi (vì vậy không có gì ngăn chiều cao của container là 0, như thể nó trống).

Cài đặt overflow: hiddentrên container sẽ tránh điều đó bằng cách thiết lập bối cảnh định dạng khối mới . Xem các phương pháp để chứa float cho các kỹ thuật khác và chứa float để được giải thích về lý do CSS được thiết kế theo cách này.

Thông thường, floats không được tính trong bố trí của cha mẹ họ.

Để ngăn chặn điều đó, thêm overflow: hiddenvào cha mẹ.

Tôi không chắc đây là một cách đúng đắn nhưng tôi đã giải quyết nó bằng cách thêm display: inline-block;vào div trình bao bọc.

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