부동 하위 항목을 포함할 때 상위 Div가 0 높이로 축소되는 이유는 무엇입니까?

높이가 0인 부모의 수수께끼: 부동 자식 및 컨테이너 높이

웹 디자인 영역에서 CSS의 특이한 동작에 직면 스타일링이 당황스러울 수 있습니다. 이러한 수수께끼 중 하나는 부동 하위 요소가 포함되어 있음에도 불구하고 상위 div의 높이가 이상하게도 0으로 줄어들 때 발생합니다. 이 수수께끼를 풀기 위해 CSS와 HTML 코드를 자세히 살펴보겠습니다.

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

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

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

<div>

이러한 스타일을 적용하면 페이지가 올바르게 렌더링됩니다. 그러나 요소를 검사한 결과 특이한 관찰 결과가 나타났습니다. 상위 div인 #wrapper는 부동 하위 div가 있음에도 불구하고 높이가 0px로 표시됩니다. 이 동작은 왜 상위 div의 높이가 사라지는가?

답은 CSS에 있는 부동 요소의 고유한 특성에 있습니다. 플로팅 콘텐츠는 기본적으로 일반 문서 흐름에서 제거되어 일반 레이아웃 외부의 위치를 ​​차지합니다. 결과적으로 컨테이너의 높이는 부동적이지 않은 콘텐츠에 의해서만 결정됩니다. 이 경우 #wrapper 내의 모든 콘텐츠가 부동되므로 컨테이너 높이가 0으로 축소됩니다.

이 문제를 해결하려면 다음과 같은 여러 기술을 사용할 수 있습니다.

• 오버플로 : Hidden: 상위 div에 Overflow: Hidden을 설정하면 새로운 블록 서식 컨텍스트가 생성됩니다. 이렇게 하면 부동 하위 요소가 컨테이너 높이에 영향을 미치게 됩니다.
• 부동 요소 포함: 상위 컨테이너의 높이가 적절하게 확장되도록 부동 요소를 포함하는 다양한 방법이 있습니다. 여기에는 의사 요소, CSS3 Flexbox 또는 그리드 레이아웃 사용이 포함됩니다.

플로팅 요소의 동작을 이해하고 적절한 포함 기술을 구현함으로써 개발자는 혼란스러운 제로 높이 상위 div 현상을 방지하고 제어를 유지할 수 있습니다. 페이지 레이아웃을 관리합니다.

위 내용은 부동 하위 항목을 포함할 때 상위 Div가 0 높이로 축소되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!