자식을 플로팅했을 때 부모 div 높이가 0 인 이유

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부모의 레이아웃에는 s가 포함되지 않습니다.

이를 방지하려면 overflow: hidden부모에게 추가 하십시오.

이것이 올바른 방법인지 확실하지 않지만 display: inline-block;래퍼 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%;
}