업데이트:

float 해제가 무엇인지 익히 알려진 사실이니 설명은 생략하고, 이 기법에 대한 나름의 생각을 적은 포스팅을 해본다.

float을 해제하는 기법으로 다음과 같은 것들을 볼 수 있다.

  • 가상 요소(clearfix)
  • overflow: hidden
  • 부모 요소에 float
  • display: inline-block
  • display: flow-root

순서대로 살펴보자.

가상 요소(clearfix)

우선 clearfix 기법은 부모 요소에 ::before/::after 가상요소를 사용, 가상의 block formatting context를 생성해주어 자식 요소의 높이값을 품도록 해준다. 다음과 같은 코드를 본 적이 있을 것이다.

1
2
3
4
5
6
7

.clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

display 속성 선언은 block 말고 table도 자주 사용된다. 한 번쯤은 둘의 차이가 궁금해본 적이 있을 것임..

See the Pen VweqgLQ by sel (@selucky) on CodePen.

clearfix CSS 선언을 한 div의 p 요소는 일정한 상하단 여백을 가지고 있고, 두 div를 비교해보면 “margin collapsing 현상(margin 상쇄 현상)”이 발생하는가 하지않는가 에서 차이가 있다. display: block 선언을 한 div의 p 요소는 상하단 여백이 상쇄되었고, table의 p 요소는 하단 여백이 보존된 것을 볼 수 있음.

상단 여백도 보존받으려면 ::before 가상요소를 써주면 된다. 최종적으로 아래와 같이 완성해주자.

1
2
3
4
5
6
7
8
9
10
11

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

  &:after {
    clear: both;
  }
}

overflow: hidden

부모 요소에 overflow: hidden 선언을 해주면 자식 요소만큼 높이값이 계산된다. 단점은 부모 요소에 뭔가 영역이 넘치는 디자인 요소가 들어갈 경우 무용지물이 된다. 그렇다고 div를 하나 더 감싸서 불필요한 태그 중첩을 만들어낼 이유도 없음.

아래부턴 사용 빈도가 낮거나 사용하기 안전하지 않은 방법을 적어볼 것이다.

부모 요소에 float 선언

부모 요소에 float 속성을 선언해주면 자식 요소만큼 높이값을 갖게 되나 그 부모 요소의 부모한테도 float 해제를 해주어야 하고, 유동적이지 못하다는 점이 있다. float을 float으로 해제한다는 게 좀 엉뚱한 방법이긴 함.

display: inline-block

부모 요소에 display: inline-block 선언을 해주면 자식 요소만큼 높이값을 갖게 되나 inline-block 선언으로 얻는 부작용을 생각하면 안전하지 않은 방법이라고 생각함.

display: flow-root

display: flow-root 선언을 해주면 내부 요소의 배치를 정의하는 새로운 block formatting context를 생성한다.1 쉽게 풀어쓰면 부모 요소가 자식 요소를 포함할 수 있게 해준다는 말임. IE 제외 브라우저에서만 지원되므로 크로스브라우징 이슈가 있는 방법이다.

무엇이 제일 나은 기법인가?

결국 clearfix vs overflow: hidden으로 추릴 수 있고, 과연 둘 중 어느 게 더 나은가?

나는 그냥 복잡한 거 생각하지 않고 무난하게 가고 싶다 라고 생각하거나 디자인적인 이슈(부모 요소의 영역을 넘어가는 요소)가 없다면 overflow 기법을 쓰는 게 나을 수도 있다. 제목에 대한 결론은 제일 유동적인 clearfix 기법에 한 표를 던진다.

  1. [1] 출처 ↩