부동 자식이 있는 컨테이너의 높이가 0인 이유는 무엇입니까?

플로팅된 하위 항목이 있는 컨테이너 높이 이해

CSS로 작업할 때 플로팅된 하위 항목이 있는 상위 컨테이너가 다음과 같은 상황에 직면할 수 있습니다. 높이가 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>

페이지가 올바르게 렌더링됩니다. 그러나 요소를 검사하면 div#wrapper 높이가 0px로 표시되는 것을 알 수 있습니다.

이런 일이 발생하는 이유

플로팅된 콘텐츠는 그렇지 않습니다. 컨테이너의 높이에 영향을 미칩니다. 이 경우 .content 및 .lbar 요소는 모두 부동 상태이므로 문서의 일반적인 흐름에서 제거됩니다. 결과적으로 컨테이너에는 떠다니지 않는 콘텐츠가 없습니다. 이렇게 하면 마치 비어 있는 것처럼 컨테이너 높이가 0으로 축소됩니다.

해결책

이 문제를 해결하려면 다음 방법을 사용할 수 있습니다.

• overflow: Hidden: 컨테이너에 이 속성을 설정하면 콘텐츠가 그 경계 밖으로 넘쳐 흐르고 있습니다. 이는 부동 소수점 자식을 수용하기 위해 컨테이너를 강제로 확장하는 새로운 블록 형식화 컨텍스트를 설정합니다.
• 부동 소수점 포함: 부동 소수점을 포함하는 다른 기술에는 클리어 속성을 사용하거나 빈 div를 추가하는 것이 포함됩니다. 명확하게: 둘 다;

CSS를 사용하여 레이아웃을 생성하려면 부동 소수점의 이러한 동작을 이해하는 것이 필수적입니다. 적절한 기술을 사용하면 컨테이너가 원하는 높이를 갖고 페이지 요소가 올바르게 배치되도록 할 수 있습니다.

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