과거에는 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 94b3e26ee717c64999d7867364b1b4a3CSS:
.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 중국어 홈페이지를 주목해주세요!