자식을 띄울 때 부모 컨테이너의 높이가 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>

페이지가 올바르게 렌더링되지만 검사 시 상위 div#wrapper의 높이가 0px로 표시됩니다. 이는 .content 및 .lbar와 같은 부동 콘텐츠가 일반 흐름에서 제거되고 블록 콘텐츠 외부의 위치를 ​​차지하기 때문에 발생합니다.

높이 문제 해결

상위 컨테이너가 플로팅된 콘텐츠의 높이까지 확장되도록 하려면 다음 두 가지 주요 기술이 있습니다.

• 오버플로: 숨김: 컨테이너 요소에 오버플로: 숨김을 설정하면 새 컨테이너가 부동 자식의 높이를 고려하도록 강제하는 블록 형식 지정 컨텍스트.
• 부동 소수점 포함: 인라인 블록, 의사 요소 사용 등 부동 소수점을 포함하는 다른 방법이 존재합니다. , 그리고 부동 요소를 다른 컨테이너에 래핑합니다.

CSS 레이아웃의 이러한 측면을 이해하는 것은 정확한 크기와 흐름을 갖춘 웹페이지를 만드는 데 중요합니다.

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