하위 항목이 떠 있을 때 상위 Div가 0 높이로 축소되는 이유는 무엇입니까?

플로팅된 하위 항목이 있는 Zero Parent Div 높이 이해

CSS에서 div에 플로팅된 하위 항목이 포함된 경우 때로는 상위 div가 발생할 수 있습니다. 높이가 0입니다. 콘텐츠가 페이지에 올바르게 렌더링된 것처럼 보인다면 이 현상은 당황스러워 보일 수 있습니다.

설명은 CSS 레이아웃 모델에 있습니다. 제공된 HTML 예제의 ".content" 및 ".lbar" div와 같은 플로팅 콘텐츠는 문서의 일반적인 흐름에서 제거되고 그 뒤에 있는 콘텐츠 옆에 배치됩니다. 이는 플로팅된 콘텐츠가 더 이상 컨테이너 div의 높이에 영향을 미치지 않는다는 것을 의미합니다.

플로팅되지 않는 콘텐츠가 없으면 상위 div("#wrapper")에는 높이에 기여하는 요소가 포함되어 있지 않습니다. 결과적으로 하위 항목이 페이지에 표시되더라도 높이가 0px로 축소됩니다.

이 문제를 해결하고 상위 div가 계속 표시되도록 하려면 개발자는 다음과 같은 기술을 사용할 수 있습니다.

• 오버플로 숨기기: 상위 div에 "overflow: Hidden"을 설정하면 새로운 블록 형식 지정 컨텍스트가 설정되어 div가 부동 하위 항목을 포함하고 0이 아닌 높이를 유지하게 됩니다.
• 부동이 아닌 콘텐츠: 상위 div 내에 텍스트 노드나 투명 요소와 같은 부동이 아닌 콘텐츠를 추가하면 div가 해당 콘텐츠를 기반으로 높이를 설정할 수 있습니다.

이 동작을 이해하면 좌절감을 방지하고 개발자가 예상치 못한 높이 문제 없이 원하는 레이아웃을 효과적으로 만들 수 있습니다.

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