부동 요소를 포함할 때 'overflow:hidden'이 CSS에서 높이 확장을 일으키는 이유는 무엇입니까?

Overflow: Hidden의 높이 확장 부작용

CSS 레이아웃 세계에서 Overflow: Hidden 속성은 제어에 중요한 역할을 합니다. 할당된 공간을 초과하는 콘텐츠의 동작. 그러나 이 속성을 사용하면 예상치 못한 한 가지 부작용은 부동 요소를 수용하기 위해 외부 요소의 높이가 확장될 수 있다는 것입니다.

이 현상을 이해하기 위해 다음 예를 고려해 보겠습니다.

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

overflow: 숨겨진 속성이 .outer 요소에 적용되면 두 개의 부동 요소(.inner-left 및 .inner-left 및 .내부 오른쪽). 왜 이런 일이 발생합니까?

설명은 블록 서식 컨텍스트의 개념에 있습니다. 보이지 않는 오버플로(기본값)가 있는 블록 상자는 새로운 블록 형식화 컨텍스트를 생성합니다. 새로운 블록 서식 컨텍스트를 생성하는 상자는 자체적으로 지정된 높이가 없는 경우 부동 소수점을 높이만큼 포함하도록 늘어나도록 정의되며 기본값은 자동입니다.

위 예에서 .outer 요소는 처음에 명시적인 요소가 없습니다. 높이로 인해 기본 자동 값이 생성됩니다. 새로운 블록 서식 컨텍스트를 생성하므로 .outer 요소 내의 콘텐츠가 더 짧더라도 상자는 그 안에 있는 부동 요소의 아래쪽 가장자리를 수용하도록 늘어납니다.

오버플로: 숨김의 부작용은 다음과 같습니다. 플로트 클리어링과 동일하지 않습니다. 클리어런스는 클리어 속성이 명시적으로 사용되고 클리어할 선행 부동 소수점이 있는 경우에만 발생합니다. 또한 높이가 0인 요소 또는 컨테이너 요소 끝에 의사 요소를 사용하여 강제 정리(clearfix)를 수행해도 외부 요소의 높이가 늘어나지 않습니다.

이 동작을 이해하는 것은 효과적인 관리에 중요합니다. 레이아웃을 설정하고 CSS 코드에서 예상치 못한 높이 확장을 방지합니다. 블록 서식 상황과 부동 간격의 영향을 고려하여 디자인을 미세 조정하여 원하는 시각적 결과를 얻을 수 있습니다.

위 내용은 부동 요소를 포함할 때 'overflow:hidden'이 CSS에서 높이 확장을 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!