'overflow:hidden'이 부동 자식이 있는 부모 요소의 높이를 확장하는 이유는 무엇입니까?

Overflow: Floated Children을 사용한 Hidden 및 요소 높이 확장

놀랍게도 외부 요소에 Overflow: Hidden을 설정하면 오류가 발생할 수 있습니다. 부동 자식 요소를 수용하기 위해 높이가 커집니다. 그 이유를 이해하기 위해 블록 서식 컨텍스트의 개념을 자세히 살펴보겠습니다.

보이지 않는 값(예: 숨김)으로 오버플로가 설정된 블록 요소가 발견되면 새로운 블록 서식 컨텍스트가 설정됩니다. 결정적으로, 블록 형식 컨텍스트 루트(이러한 요소라고 함)는 명시적인 높이가 설정되지 않은 경우 부동 하위 항목을 포함하기 위해 수직으로 늘어날 것으로 예상됩니다.

이 동작은 CSS2에 도입된 개정에서 비롯됩니다. 1. 다른 문제를 해결합니다. 이 변경 사항은 지정된 높이가 없는 블록 서식 컨텍스트 루트에 적용하기 위해 부동 소수점의 아래쪽 가장자리가 포함 블록(상위)에 포함되는 클리어런스 개념을 효과적으로 확장했습니다.

제공된 예에서 외부 요소 Overflow: Hidden으로 설정되어 새로운 블록 형식화 컨텍스트 생성이 트리거됩니다. 외부 요소에는 지정된 높이가 없으므로 기본값은 자동이며 아래쪽으로 늘어나 부동 내부 요소를 둘러쌉니다.

이 현상을 부동 클리어런스와 구별하는 것이 중요합니다. 클리어런스는 클리어: 둘 다 또는 유사한 효과가 있는 요소가 이전 부유물을 컨테이너 상단으로 강제할 때 발생합니다. 대조적으로, 부동 소수점을 포함하기 위해 블록 형식 컨텍스트 루트를 오버플로하는 것은 해당 컨텍스트 내에서만 발생하며 외부 요소에는 영향을 미치지 않습니다.

위 내용은 'overflow:hidden'이 부동 자식이 있는 부모 요소의 높이를 확장하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!