.clearfix class vs : after

Question

왼쪽 요소를 떠 다니는 것이 더 낫습니다.

일반적인 .clearfix 클래스 사용 :

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

당신이 재 사용 및 컨테이너 요소에 적용 할 수 있습니다 :

<div class="some-section clearfix"> 
    <div class="align-left"> left </div> 
    <div class="align-right"> right </div> 
    </div> 

    <div class="some-other-section clearfix"> 
    <div class="align-right"> right </div> 
    </div> 

또는 특정 청산 규칙과 같은 :

.some-section:after, some-other-section:after{ 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
    line-height:0; 
    height:0; 
} 

을

?

Answer 1

:after을 사용하면 브라우저 간 문제로 간주해야합니다. 우리는 옛 사람을 포함한 모든 브라우저에 대한 지원을 제공하는 경우 의사 요소는 방법이 될 수 없습니다 :특정 클래스 대 제네릭 클래스에 관련

CSS selectors and pseudo selectors browser compatibility

---

정의 :

일반 클래스은 마크 업의 모든 요소에 적용 할 수 있으며 모든 요소가 지원하는 일반 서식 지정 지침과 함께 사용하거나 여러 요소 유형에 사용해야하는 서식 지정 지침에 가장 적합합니다.

특정 클래스은 마크 업의 특정 요소에만 적용함으로써 그 목적을 달성하기 때문에 한 유형의 요소에만 해당하는 서식 지정 명령어에 가장 적합합니다.특정 일에 걸쳐 일반 클래스를 사용하는

목표는 다음과 같습니다 다른

1. 클리너 마크 업
2. 재이용
3. 작은 파일 (브라우저의 내용이 성능을 다운로드)
4. 쉬운 사이^{유지 또는 업데이트하려면}

Answer 2

필자가 개인적으로 선호하는 .clearfix는 브라우저 지원이 가장 많으므로 - IE6 & 7 지원하지 않습니다. 또한 한 곳에서 등록 정보 삭제를 정의하고이를 사용할 필요가있는 곳이면 어디서나 클래스를 추가 할 수 있습니다. 계속 사용하는 경우 : 요소 단위로 처리하면 많은 중복 CSS로 끝납니다.

Answer 3

아니요. 인터넷 Explorer 7 및 이전 의사 요소를 지원하지 않는, 그래서 여기에 내가 무엇을 사용 :

.clearfix { 
    clear: both; 
} 

및

<br class="clearfix" /> 

그것은 거의 의미에도 IE 6에서 작동, 정말 멋지고 깨끗 .