부동 자식이 있는 부모 Div의 높이가 0인 이유는 무엇입니까?

플로팅된 하위 항목이 있는 상위 Div의 높이 이해

웹 디자인의 맥락에서 div 컨테이너의 높이가 영향을 받을 수 있습니다. 하위 요소로. 그러나 해당 하위 요소가 부동되면 예기치 않은 동작이 발생하여 상위 div의 높이가 0이 될 수 있습니다.

이를 설명하려면 다음 CSS를 고려하세요.

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

예를 들어 다음 CSS를 사용하여 HTML을 만듭니다.

<div>

페이지가 올바르게 렌더링되는 것을 볼 수 있지만 DOM을 검사하면 "#wrapper" div 높이가 0px인 것 같습니다. 이는 플로팅된 콘텐츠가 문서의 일반적인 흐름에서 스스로 제거되어 본질적으로 문서 트리에서 제거되기 때문입니다.

이로 인해 상위 div의 높이가 플로팅된 하위 항목의 영향을 받지 않습니다. 결과적으로 상위 div는 기본 높이 0px로 유지됩니다.

이 문제를 해결하고 상위 div가 부동 콘텐츠를 포함하도록 확장되도록 하려면 상위 div의 "overflow:hidden" 속성을 사용할 수 있습니다. div. 이렇게 하면 부동된 하위 요소가 상위 경계 내에 유지되도록 하는 새로운 "블록 서식 컨텍스트"가 생성됩니다.

업데이트된 CSS는 다음과 같습니다.

#wrapper {
  width: 75%;
  min-width: 800px;
  overflow: hidden; /* Added */
}

이 수정을 통해 "#wrapper " 이제 div는 플로팅된 하위 항목에 맞게 늘어나서 페이지 레이아웃이 예상대로 작동할 수 있습니다.

위 내용은 부동 자식이 있는 부모 Div의 높이가 0인 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!