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

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

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 <p>clearfix 클래스를 상위 컨테이너에 적용하고 Overflow:hidden을 제거합니다. 이렇게 하면 하위 요소가 계속 표시되는 동안 레이아웃이 유지됩니다.</p>
<p><strong>해결책 2: 오버플로 표시로 부동 동위 레이아웃 유지</strong></p>
<p>대체 접근 방식은 오버플로를 사용하는 것입니다. 절대 위치 지정을 사용하여 하위 요소를 컨테이너 외부에 표시하고 전략적으로 배치합니다. 그러나 형제 부동소수형 레이아웃 흐름을 유지하려면 다음 단계가 필요합니다.</p>
<ol>
<li>하위 요소를 위치: 절대값으로 설정합니다.</li>
<li>다음을 기반으로 하위 요소의 올바른 위치를 계산합니다. 상위의 너비와 형제의 위치.</li>
<li>부모의 크기가 변경됨에 따라 하위 요소의 위치를 ​​동적으로 조정하여 형제와 정렬되도록 합니다.</li>
</ol></code>

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