Floated Child Div의 높이가 때때로 0px인 이유는 무엇이며 어떻게 해결할 수 있습니까?

플로팅된 하위 Div의 높이 100% 달성

상위 div 내에서 플로팅된 하위 div를 활용할 때 하위 div가 다음과 같은 상황에 직면할 수 있습니다. div는 높이를 0px로 가정합니다. 겉보기에 수수께끼처럼 보이는 이 동작은 부동 요소가 상위 요소와 상호 작용하는 방식에서 비롯됩니다.

이 특별한 경우 내부 div는 왼쪽 부동으로 설정되고 높이가 100%로 할당됩니다. 그러나 이 구성은 원하는 결과를 얻지 못합니다.

이 문제를 해결하는 열쇠는 상위 div의 CSS 속성을 수정하는 데 있습니다. 표시 속성을 flex로 설정하면 상위 div가 flex 컨테이너처럼 동작하도록 하여 하위 요소가 전체 높이까지 확장되도록 할 수 있습니다.

다음은 상위 div에 대해 수정된 CSS 코드입니다.

#outer {
  display: flex;
}

IE9와 같은 이전 브라우저에서는 flex 속성을 완전히 지원하지 않을 수 있다는 점에 유의하는 것이 중요합니다. 따라서 다양한 브라우저 간의 호환성을 보장하려면 공급업체 접두사를 추가하는 것이 좋습니다. 또한, Stretch 값과 함께 align-items 속성을 사용하여 하위 div가 상위 div의 전체 높이를 채우도록 하는 것이 좋습니다.

이러한 CSS 수정 사항을 적용하면 내부 div가 성공적으로 가정하도록 강제할 수 있습니다. 상위 div 높이의 100%로 원하는 수직 정렬을 달성합니다.

위 내용은 Floated Child Div의 높이가 때때로 0px인 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!