레이아웃을 유지하면서 오버플로 숨겨진 컨테이너에서 요소 가시성을 유지하는 방법은 무엇입니까?

오버플로 숨겨진 컨테이너에서 요소 가시성 유지

CSS에서 상위 컨테이너에 Overflow:hidden을 설정하면 높이에 따라 확장할 수 있습니다. 떠다니는 아이들의 모습입니다. 그러나 이 기능에는 특히 컨테이너 내 하위 항목을 마스킹하는 데 제한이 있습니다.

사용자가 컨테이너 외부의 요소 가시성을 유지하면서 부동 하위 항목이 있는 컨테이너의 왼쪽/오른쪽 중심을 유지하려고 할 때 문제가 발생합니다. Overflow:visible을 사용하면 마스킹 문제가 제거되지만 레이아웃 흐름이 중단됩니다.

해결책 1: Clearfix 사용

해결책은 Clearfix 기술을 활용하는 것입니다. Overflow:hidden의 레이아웃 보존 동작은 하위 항목을 마스킹하지 않고 숨겨집니다. CSS 코드는 다음과 같습니다.

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

clearfix 클래스를 상위 컨테이너에 적용하고 Overflow:hidden을 제거합니다. 이렇게 하면 하위 요소가 계속 표시되는 동안 레이아웃이 유지됩니다.

해결책 2: 오버플로 표시로 부동 동위 레이아웃 유지

대체 접근 방식은 오버플로를 사용하는 것입니다. 절대 위치 지정을 사용하여 하위 요소를 컨테이너 외부에 표시하고 전략적으로 배치합니다. 그러나 형제 부동소수형 레이아웃 흐름을 유지하려면 다음 단계가 필요합니다.

1. 하위 요소를 위치: 절대값으로 설정합니다.
2. 다음을 기반으로 하위 요소의 올바른 위치를 계산합니다. 상위의 너비와 형제의 위치.
3. 부모의 크기가 변경됨에 따라 하위 요소의 위치를 ​​동적으로 조정하여 형제와 정렬되도록 합니다.

위 내용은 레이아웃을 유지하면서 오버플로 숨겨진 컨테이너에서 요소 가시성을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!