CSS 높이 축소 란 무엇입니까?

문서 흐름에서는 기본적으로 부모 요소의 높이가 자식 요소에 의해 확장됩니다. 즉, 자식 요소의 높이는 부모 요소의 높이와 같습니다. 그러나 자식 요소를 부동으로 설정하면 자식 요소가 문서 흐름에서 완전히 벗어나게 되며 이때 자식 요소는 부모 요소의 높이를 지원하지 못하여 부모 요소의 높이가 발생하게 됩니다. 무너지다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

상위 요소에 부동 요소만 포함되어 있고 상위 요소가 높이와 너비를 설정하지 않은 경우 해당 높이가 0으로 축소됩니다. 이를 "높이 축소"라고 합니다.

상위 요소에 배경이나 테두리가 포함되어 있으면 넘치는 요소는 상위 요소의 일부처럼 보이지 않습니다.

"높이 붕괴" 문제를 해결하는 방법:

옵션 1: 상위 요소에 고정 높이 지정

단점: 상위 요소에 고정 높이를 지정하는 것은 높이 적응 원칙을 위반하는 것입니다. 유연성이 충분하지 않아 권장되지 않습니다.

옵션 2: 오버플로 속성 추가: 숨김;

장점: 우수한 브라우저 지원 및 단순성

단점: 하위 요소에 위치 지정 속성이 있는 경우 오버플로 설정: 컨테이너 외부 부분이 잘립니다. .

[추천 튜토리얼: CSS 비디오 튜토리얼]

옵션 3: 하위 요소 끝에 빈 p를 추가하고 아래 스타일을 설정하세요

div{
clear: both;
height: 0;
overflow: hidden;
}

장점: 모든 브라우저에서 지원하며 컨테이너 오버플로는 지원되지 않습니다.
단점: 페이지에 의미 없는 div를 추가하면 쉽게 코드 중복이 발생할 수 있습니다.

옵션 4: 범용 클리어 플로트 방법

세 번째 옵션의 기능을 구현하려면 상위 요소의 콘텐츠 끝에 의사 요소를 추가하세요. 구체적인 설정 스타일은 다음과 같습니다.

부모 요소:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

장점: 아니요 코드 중복을 유발하고 나머지 코드의 성능을 최적화하는 것이 좋습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 높이 축소 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!