오버플로:숨겨진 부모를 넘어 부동 자식 가시성을 유지하는 방법은 무엇입니까?

Overflow:Hidden Parent를 넘어 부동 하위 가시성 보존

CSS에서는 Overflow:hidden 속성을 상위 컨테이너에 적용하여 다음을 보장할 수 있습니다. 떠다니는 아이들을 수용할 수 있도록 수직으로 확장됩니다. 그러나 이 속성은 margin:auto와 함께 사용될 때 흥미로운 동작을 나타냅니다.

overflow:hidden 및 margin:auto가 있는 상위 컨테이너가 부동 요소와 형제인 경우 해당 요소 옆에 나타납니다. . 즉, 형제가 왼쪽으로 부동되면 상위 컨테이너가 오른쪽으로 밀리고 부동 요소 사이의 중앙에 위치하게 됩니다.

이 동작은 특정 시나리오에서 유용할 수 있지만 다음과 같은 경우가 있을 수 있습니다. 하위 요소를 가리지 않고 이 레이아웃을 유지하고 싶습니다. Overflow:visible은 레이아웃 보존 효과를 비활성화하여 하위 요소가 상위 컨테이너에 의해 가려지기 때문에 이는 어려울 수 있습니다.

해결책 Clearfix 기법 사용:

이 문제를 해결하려면 Overflow:hidden을 사용하지 않고 "레이아웃 보존"을 수행하는 Clearfix 기술을 활용할 수 있습니다. 수행 방법은 다음과 같습니다.

1. 다음 CSS 스타일을 사용하여 Clearfix 클래스를 만듭니다.

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */</code>

2. clearfix 클래스를 상위 컨테이너에 추가하고 Overflow:hidden 속성.

clearfix 클래스를 적용하면 부동 요소의 상대적 위치 지정을 포함하여 원하는 레이아웃을 유지하는 동시에 하위 요소가 마스크되지 않도록 보장할 수 있습니다. 이 기술은 부모 컨테이너 외부 요소의 시각적 계층 구조와 접근성을 유지해야 할 때 Overflow:hidden에 대한 적절한 대안으로 사용됩니다.

위 내용은 오버플로:숨겨진 부모를 넘어 부동 자식 가시성을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!