CSS 컨테이너 div가 높이를 얻지 않음

CSS 컨테이너 div가 높이를 얻지 않음

---

컨테이너 div가 어린이의 최대 높이를 얻길 원합니다. 아이 div의 키가 어느 정도인지 모릅니다. JSFiddle 을 시험해 보았습니다 . 컨테이너 div가 빨간색입니다. 표시되지 않습니다. 왜?

---

다음 특성을 추가하십시오.

.c{
    ...
    overflow: hidden;
}

이렇게하면 플로팅 요소에 관계없이 컨테이너가 컨테이너 내의 모든 요소의 높이를 존중하게됩니다.
http://jsfiddle.net/gtdfY/3/

최신 정보

최근 에이 트릭이 필요한 프로젝트를 진행하고 있었지만 오버플로를 표시해야했습니다. 대신 의사 요소를 사용하여 수레를 지우고 모든 요소에 오버플로를 허용하면서 동일한 효과를 효과적으로 달성 할 수 있습니다.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

---

아이들이 떠 다니는 것은 컨테이너 앞에 떠 다니는 것을 의미합니다. 올바른 높이를 얻으려면 플로트를 "지우십시오"

div style = "clear : both"는 플로팅을 지우고 컨테이너에 올바른 높이를 제공합니다. 수레에 대한 자세한 내용은 http://css.maxdesign.com.au/floatutorial/clear.htm 을 참조 하십시오 .

예.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

---

그렇게 쉽지 않습니까?

.c {
    overflow: auto;
}

---

마지막 에이 지우기 div를 삽입하십시오 </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

---

최선의 방탄 솔루션은 컨테이너에 의사 요소를 추가 ::before하고 추가 ::after하는 것입니다. 예를 들어 다음과 같은 목록이 있다면

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

그리고 목록의 모든 요소에는 float:left속성 이 있으므로 CSS에 추가해야합니다.

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

또는 display:inline-block;속성을 사용해 볼 수 있으며 clearfix를 추가 할 필요가 없습니다.

참고URL : https://stackoverflow.com/questions/7817269/css-container-div-not-getting-height