자식을 띄울 때 부모 컨테이너의 높이가 0인 이유는 무엇입니까?

플로팅 콘텐츠 및 컨테이너 높이 혼란

CSS에서 플로팅 요소는 일반적인 문서 흐름 외부에 배치되며 높이에 영향을 주지 않습니다. 상위 컨테이너. 이 동작은 특히 페이지가 올바르게 렌더링될 때 직관적이지 않게 보일 수 있습니다.

문제 이해

다음 CSS를 고려하세요.

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

다음과 같은 HTML 구조가 생성됩니다.

<div>
<p>페이지는 올바르게 렌더링되지만 검사 시 상위 div#wrapper의 높이가 0px로 표시됩니다. 이는 .content 및 .lbar와 같은 부동 콘텐츠가 일반 흐름에서 제거되고 블록 콘텐츠 외부의 위치를 ​​차지하기 때문에 발생합니다.</p>
<p><strong>높이 문제 해결</strong></p>
<p> 상위 컨테이너가 플로팅된 콘텐츠의 높이까지 확장되도록 하려면 두 가지 주요 방법이 있습니다. 기술:</p>
<ul>
<li>
<strong>오버플로: 숨김:</strong> 컨테이너 요소에 오버플로: 숨김을 설정하면 새로운 블록 형식 지정 컨텍스트가 설정되어 컨테이너가 부동 자식의 높이를 고려하게 됩니다. .</li>
<li>
<strong>플로트 포함:</strong> 인라인 블록, 의사 요소, 그리고 부동 요소를 다른 컨테이너에 래핑합니다.</li>
</ul>
<p>CSS 레이아웃의 이러한 측면을 이해하는 것은 정확한 크기와 흐름을 갖춘 웹페이지를 만드는 데 중요합니다.</p>
</div>

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