'overflow:hidden'이 부동 자식이 있는 상위 컨테이너의 높이를 높이는 이유는 무엇입니까?

미스터리 공개: 오버플로 이유: 숨겨진 트리거 높이 확장

CSS 영역에서 오버플로 속성은 다음의 동작을 대폭 변경할 수 있습니다. 특정 시각적 요소. 그러나 예상치 못한 부작용 중 하나는 부동 요소와 함께 사용할 때 외부 요소의 높이를 높이는 기능입니다.

이 현상을 이해하려면 BFC(블록 서식 컨텍스트)의 복잡성을 자세히 조사해야 합니다. 오버플로: 숨김은 내부 요소의 동작을 수용하고 이에 영향을 미치는 컨테이너인 BFC의 생성을 촉발합니다.

이 효과를 이해하는 데 중요한 것은 "블록 서식 컨텍스트 루트"의 개념입니다. 이는 명시적인 높이가 없는(기본적으로 자동) BFC 내의 블록 상자입니다. 이러한 상자 내에 부동 소수점이 있는 경우 사양에서는 부동 소수점 자손을 포함하기 위해 상자가 수직으로 확장되도록 지시합니다.

이 동작은 별도의 문제를 해결하기 위한 CSS2.1 변경에서 비롯됩니다. 그러나 이로 인해 외부 요소가 부동 요소를 수용하기 위해 확장되는, 주어진 예에서 관찰된 부작용이 발생했습니다.

명확히 말하자면 이 효과는 부동 클리어런스에 투명 속성을 사용하는 것과 다릅니다. 클리어런스는 이전 플로트를 독점적으로 클리어합니다. 외부 요소의 높이에는 직접적인 영향을 미치지 않습니다. 그러나 외부 요소 내에서 Clear를 사용하면 부동 요소의 다음 형제로서의 상태로 인해 높이 확장이 발생할 수 있습니다. "clearfix"로 알려진 이 기술은 높이가 0인 요소를 활용하여 부유물을 강제로 봉쇄하고 이후 컨테이너를 확장합니다.

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