>웹 프론트엔드 >CSS 튜토리얼 >수레를 지우려면 이후 의사 클래스를 사용하세요.

수레를 지우려면 이후 의사 클래스를 사용하세요.

高洛峰
高洛峰원래의
2017-03-01 14:57:192468검색

과거에는 float를 지울 때 항상 지우고 싶은 요소 뒤에

 <div style="clear:both;"></div>

를 추가하거나 br 태그에 넣어서 작성했습니다. 문제는 해결되지만 의미 없는 태그는 다음과 같이 구현됩니다.

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

는 호환됩니다. IE6 및 IE7에서는 의사 클래스 이후에 ie6 및 ie7을 사용할 수 없습니다. 다음 코드를 추가하세요

 .clearfix{zoom:1}

일반적으로 상위 레이어 내부에 float가 있으면 상위 레이어의 높이가 0이 될 수 있습니다. 그냥 추가하세요.

HTML:

 c7c162f4346c5f9b366c4224b512a308
     ef97f43c01124fc78febd898df2aef5eleft94b3e26ee717c64999d7867364b1b4a3
     d63265fd15dd0bd32166bea3d879ea48right94b3e26ee717c64999d7867364b1b4a3
 94b3e26ee717c64999d7867364b1b4a3

CSS:

.clearfix{zoom:1}    
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.parent{
    background-color:red;
    width:120px;
}
.left{
    float:left;
    background-color:pink;
    height:60px;
}
.right{
    float:right;
    background-color:#abcdef;
}

의사 클래스 이후에 더 많이 사용 클리어링 관련 글은 PHP 중국어 홈페이지를 주목해주세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.