'overflow:hidden'이 부동 요소가 있는 컨테이너에서 예기치 않은 높이 증가를 일으키는 이유는 무엇입니까?

오버플로: 부동 요소의 숨겨진 및 예기치 않은 높이 증가

질문:
오버플로 시: 숨겨진 것은 부동 요소를 포함하는 외부 요소에 적용했는데 외부 요소의 높이가 예기치 않게 증가하여 포함하는 이유는 무엇입니까?

답변:
예기치 않은 높이 증가는 Overflow: Hidden이 새로운 BFC(블록 서식 컨텍스트)를 생성하기 때문에 발생합니다. 표시되지 않는 오버플로가 있는 요소를 포함하는 BFC 루트는 지정된 높이가 없는 경우 부동 소수점을 수용할 수 있도록 높이를 확장합니다.

CSS 사양에 따르면 블록 형식 컨텍스트 루트는 "포함하도록 확장됩니다. 지정된 높이가 없으면 높이에 따라 부동하며 기본값은 자동입니다." 이 높이 증가는 아래쪽 여백 가장자리가 BFC 루트의 아래쪽 콘텐츠 가장자리를 초과하는 부동 하위 항목에도 적용됩니다.

플로트 지우기와의 차이점
이 동작은 부동 클리어런스와 다릅니다. 클리어 속성이 적용되고 이전에 지워야 할 부동 소수점이 있을 때 발생합니다. 이 경우에는 다음과 같습니다.

• BFC 루트 외부 요소에 Clear: 둘 다를 사용하면 부동 소수점이 지워지지만 외부 요소가 늘어나지는 않습니다.
• 높이가 0인 요소를 다음과 같이 배치합니다. 명확함: BFC 루트 내부에 있는 두 요소 모두 외부 요소가 플로팅된 요소의 아래쪽 가장자리를 수용하기 위해 아래쪽으로 늘어납니다(라고 함). "clearfix").

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