css에서 float를 이용해 단락을 정렬하고 나면 float의 찌꺼기(?)를 정리해 줘야 하는데, 구식 관습으로는 그 유명한 clear: both;가 있다. 이를테면 html에서 float 단락 끝에 아무 내용 없는 .fix 클래스 div를 넣는 것이다.

<div class="fix"></div>

.fix {
    clear: both;
}

그러나 이것은 좋지 않은 관습이다. html 문서에는 '콘텐츠'가 들어가야 하고, 그 '표현'은 css가 맡아야 한다. 하지만 html에 내용 없는 div가 들어가게 된다. 이를 피하기 위해, 그 아래쪽 footer에 clear: both;를 넣을 수도 있다. 하지만 그러면 css를 모듈화 할 수 없다. 이 역시 좋지 않은 관습이다.

그래서 .group이라는 클래스를 만들어 해당 단락 div에 함께 넣는다. 이 .group 클래스는 다음과 같이 구성되어 있다.

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}

핵심은 .group: after에 clear: both;를 두는 것이다. 그리고 단락 앞뒤에 빈 콘텐츠("")를 두고, 그 display 속성을 table로 한다. 'zoom'이라는 속성은 사실 프로덕션에서는 쓰지 말라고 하는데, 아마 인터넷 익스플로러 때문에 쓴 것으로 보인다. zoom을 1로 설정하면 익스플로러 구 버전의 display 속성 버그를 해결할 수 있다.