HTML에서 높이 붕괴 문제를 해결하는 방법

이 장에서는 HTML의 높이 붕괴 문제를 해결하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

높이 붕괴 문제:
요소의 BFC가 켜져 있으면 요소에는 다음이 발생합니다. 특성: #🎜 🎜#

1 상위 요소의 수직 여백은 하위 요소와 겹치지 않습니다

BFC가 활성화된 요소는 부동 요소로 덮이지 않습니다
BFC가 활성화된 요소는 다음을 포함할 수 있습니다. 부동 자식 요소#🎜🎜 #

그럼 요소의 BFC를 켜는 방법은 무엇일까요?

float 요소 설정 요소 절대 위치 설정
요소를 inline-block으로 설정

float:left; parent 요소를 사용하면 상위 요소의 너비가 손실되고 이 메서드를 사용하면 하위 요소가 위로 이동합니다.

display:inlink-block; 레이아웃이 준비되었지만 너비가 사라졌습니다. 그러나 너비 손실이 발생하므로 이 방법은 권장되지 않습니다.

오버플로 요소의 보이지 않는 값을 설정합니다.

overflow:auto; 최소한의 부작용으로 상위 요소의 높이 축소를 해결합니다.

Compatibility

IE6에는 BFC가 없지만 hasLayout이라는 또 다른 암시적 속성이 있습니다.

이 속성 함수는 다음과 같습니다. BFC와 유사합니다. IE6 브라우저는 hasLayout을 활성화하여 문제를 해결합니다.

방법:

요소의 확대/축소를 1로 설정: Zoom:1

IE6에서는 요소에 너비가 지정되면 활성화됩니다. 기본적으로 하나

hasLayout.

clear: 둘 다 가장 큰 영향을 미치는 요소의 부동소수점을 지웁니다.

#🎜 🎜# 높이 축소 계획 2를 해결하려면

크게 접힌 상위 요소 끝에 빈 div를 추가할 수 있습니다 이 div는 부동하지 않기 때문에 , 상위 요소의 높이를 확장할 수 있습니다

그런 다음 이를 지우고 부동화하여 기본적으로 부작용 없이 이 빈 div를 통해 상위 요소의 높이를 확장할 수 있습니다

해결할 수 있지만 문제가 있지만 페이지 중복 구조에 추가합니다.


이후 의사 클래스를 사용하여 블록 수준 요소로 설정하고 양쪽의 부동 소수점을 지워 부모 클래스 붕괴 문제를 해결합니다.

after pseudo-class를 통해 box1의 뒷면을 선택#🎜🎜 #

.box1:after{
         content:"";
         display:block;
         //清除两侧的浮动
         clear:both;
}
 /* IE6不支持伪类。  zoom:1;*/
.clearfix:after{
         /*添加一个内容*/
         content:"";
         /*转换为一个块元素*/
         display:block;
         /*清除两侧的浮动*/
         clear:both;
     }
 /*在IE6中不支持after伪类，
     所以在IE6中还需要使用hasLayout来处理*/

     .clearfix{
         zoom:1;
     }

IE6에서 위 내용이 인라인 요소라면 플로팅되지 않습니다

#🎜 🎜#최종 버전:

//통과 수정된 클리어픽스는 다기능
//높이 붕괴를 해결할 수 있을 뿐만 아니라 수직 여백도 보장할 수 있습니다. 상위 요소

과 하위 요소가

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

겹칩니다.

위 내용은 HTML에서 높이 붕괴 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!