오버플로를 방지하는 방법: CSS에서 부동 하위 항목을 숨기지 않도록 숨기나요?

Overflow에서 하위 가시성 보존: 숨겨진 컨테이너

CSS에서 Overflow: Hidden 속성은 컨테이너 내에서 넘쳐나는 콘텐츠를 숨깁니다. 그러나 떠다니는 아이의 부모에게 적용하면 흥미로운 효과가 나타난다. 컨테이너는 자동으로 부동 형제 요소 옆에 정렬되어 부동 요소의 부모가 병치되어 나타나는 레이아웃을 만듭니다.

문제 설명:

문제는 유지 관리에 있습니다. 아이들을 숨기지 않고 이 레이아웃을 사용하세요. 컨테이너 오버플로:를 표시함으로써 컨테이너는 그 위에 나타나는 부동 요소의 흐름을 무시합니다.

해결책:

이를 극복하려면 " 클리어픽스(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>

이 접근 방식은 레이아웃을 유지하면서 부동 요소를 효과적으로 "지우고" 상위 요소를 허용합니다. 자식을 가리지 않고 컨테이너 자체를 인접하게 정렬합니다.

위 내용은 오버플로를 방지하는 방법: CSS에서 부동 하위 항목을 숨기지 않도록 숨기나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!