부유물 제거를 위한 최적화 계획 공유

clearfix hack은 추가 태그를 사용하지 않고 플로팅을 클리어하는 방법으로 잘 알려져 있습니다. 이 기사에서는 필요한 CSS 수를 더욱 줄일 수 있는 최적화 솔루션을 제공합니다.

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

microclearfix는 Thierry Koblentz의 "clearfix reloaded, 현대 브라우저에 적합"을 기반으로 최적화되었습니다.

다음은 microclearfix

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

"micro의 코드 스니펫입니다. Clearfix"는 의사 클래스 요소를 생성하고 표시 속성 을 테이블로 설정합니다. 이는 익명 테이블 셀을 생성하고 새 BFC를 생성합니다. 이는
:before pseudo를 의미합니다. -class는 위쪽 여백이 접히는 것을 방지하고 :after 의사 클래스를 사용하여 생성된 콘텐츠를 숨길 필요가 없고 CSS 코드가 덜 필요하다는 장점이 있습니다. 부동 소수점을 지우려면 다음이 포함됩니다. before 선택기는 필요하지 않지만 :before를 추가하면 상단 여백이 접히는 것을 방지할 수 있습니다.

다른 방법과 유사합니다. BFC를 사용하여 부동소수점을 지우면 시각적이 보장됩니다. 예를 들어 Overflow:hidden
IE 6/7에서 Zoom:1을 사용하면 시각적 일관성이 보장됩니다
• 주의: 세부사항: IE 6/ 새로운 BFC 7에서 부동 요소의 하단 여백은 포함되지 않습니다. 자세한 설명은 여기를 참조하십시오: CSS 표현식을 사용하여 IE에서 더 나은 부동 소수점 포함.

  content:" "사용하면 Opera를 피할 수 있습니다. 버그, contenteditable 속성도 요소에 나타나는 경우 이 버그는 요소 주위에 공백을 생성하여 지워집니다. 선택적인 수정 사항은 ​​font:0/0 a를 사용하는 것입니다. 이 버그를 테스트한 Sergio Cerrutti에게 감사드립니다
  <.>
  

  【관련 추천】

1.

무료 CSS 온라인 동영상 튜토리얼

2.

3.

php.cn Dugu Jiujian (2)-css 동영상 튜토리얼

위 내용은 부유물 제거를 위한 최적화 계획 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!