float 해제: Micro clearfix vs Legacy clearfix

clearfix

floating 을 해제하는 가장 널리 알려진 방법으로 6가지(legacy) 정도가 알려져 있습니다.

Legacy clearfix

첫 번째 float 해제 방법

가장 고전적인 방법으로 자식 요소 다음의 빈 요소를 사용하여 clear 속성을 이용해 float를 해제하는 방법이 있습니다.

   → 이 방법은 내용과 분리하는 표현의 분리라는 측면에 어긋나기 때문에 권장되는 방법은 아닙니다.

두 번째 float 해제 방법

두 번째 방법은overflow 속성 이용하는 방법입니다 

이 속성은 넘치는 콘텐츠를 숨기고 보이지 않게 해주는 속성으로 이 속성을 이용하면 부모 요소에 overflow: hidden 또는 auto 속성값을 사용하면 부모 요소가 자식 요소를 담아낼 수 있도록 확장해 줍니다.

말 그대로 넘치는 것을 숨겨주는 속성인데, 여기선 다른 의미도 포함하고 있습니다.

이는 부모에 대한 높이값이 없기 때문에 부모 높이값을 설정해 주는 이치입니다.

이를 달리 해석해 보면 넘치는 콘텐츠를 숨긴다는 의미는 부모가 그 자식들을 숨긴다는 것입니다.

근데 부모 요소가 높이값도 가지고 있지도 않고 자식들을 품지도 못하고 있는 상황(자식요소가 플롯된 상황)에서 컨테이닝 요소가 숨김 처리를 하려고 하는데 자식을 품고 있지 못하기 때문에 사실 숨길 요소가 없는 상황입니다.

이러한 상태에서 컨테이닝 박스(부모요소)에 overflow: hidden; 속성을 적용하게 되면 실제로 자식요소를 포함(문서흐름상 올바르게 놓여있지 않을 뿐)하고 있기 때문에 자식 요소가 부모요소를 넘치던 넘치지 않던 간에 자식요소를 포함하기 위해서 높이값을 자동으로 계산하여 설정하게 됩니다.

즉, overflow:hidden;을 정의하면 컨테이닝 박스의 높이값이 자동 계산되는 것입니다.

하지만, 이 방법은 내용이 긴 콘텐츠가 해당 부모요소를 벗어나서 보여져야 할 경우에 내용이 잘리게 되어 보여지지 않게 되거나 auto의 경우 스크롤바가 생기게 됩니다.

자식요소나 자손들 중에 넘치는 요소가 있다면 그 요소를 모두 보여줘야 할 경우에 숨김처리때문에 보이지 않게 되기 때문입니다.

디자인적인 이슈가 없다면 사용해도 되겠지만 여튼 상황에 따라 선택적으로 사용하시길 바랍니다.

세 번째 float 해제 방법

세 번째 방법은 float 속성 이용하는 방법입니다.

   → 많이 이용되는 방법 중의 하나로 부모 요소에 float 요소를 적용하여 floating 을 해제합니다.

이는 문서흐름상 바르게 놓이두도록 즉, 자식 엘리먼트를 포함함으로써 부모의 높이값도 제대로 반영되도록 부모(컨테이닝 요소)에게도 float 속성을 반영하는 방법입니다.

이렇게 하면 부모 요소는 자식 요소의 부모 높이값을 가지게 됩니다

네 번째 float 해제 방법

네 번째 방법은 ::before, ::after 가상 요소를 이용하는 방법입니다.

   → 부모 요소에 가상 클래스인 before, after 를 이용하여 요소를 블럭 요소로 만들어 after 가상 요소에서 float 를 해제하는 방법을 이용합니다.

가상(슈도,의사) 요소를 이용하는 방법으로 현재까지 소개한 방식 중 가장 깔끔하고 효과적인 방법입니다.

가상 요소중 :after 를 이용합니다.

이것은 부모 요소에 가상요소를 넣어서 사용하게 됩니다.

css

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

네 번째 방법인 가상요소를 이용하는 방법은 IE6 ~ 7 에서 지원되는 속성이 아니기 때문에 IE 전용확장 ZOOM 속성을 이용하여 문제를 해결할 수 있습니다.

css

.parent { *zoom: 1; }

IE 6~7 브라우저는 가상 요소 선택자 :after를 지원하지 않지만 CSS hack을 이용하여 자식의 높이를 부모에게 전달 할 수 있습니다.

zoom: 1 속성은 IE 전용 확장 속성으로써 본래의 존재 목적은 IE 브라우저에서 웹 문서를 자유롭게 'zoom in / zoom out' 하는 것이다.

이 속성을 부여하게 되면 요소는 IE 브라우저에서만 존재하는 hasLayout 이라는 개념의 속성을 갖게 되는데 이 속성이 IE 브라우저에서 float 문제를 해결하는 trigger로 작용을 하고 다른 브라우저에는 영향을 미치지 않게 됩니다. 

zoom 속성 앞에 *를 붙이는 이유는 현재는 존재하지 않지만 향후 zoom 과 동일한 이름을 지닌 속성이 표준으로 등장하거나 다른 웹 브라우저에서 CSS 확장 속성으로 등장하더라도 이 코드를 무시하도록 만드는 'hack'을 사용한 것입니다. 속성 앞에 공백 없이 '*'을 붙이면 해당 속성은 IE 6~7 브라우저에서만 작용하게 됩니다.

css

.parent { *zoom: 1; }
.parent:after {
     content: "";
     display:block;
     clear:both;
}

다섯 번째 float 해제 방법

다섯 번째 방법으로 부모 요소에 display: inline-block; 을 주는 방식이 있습니다.

이 방법을 이용하면 부모 요소는 자식 요소의 높이만큼을 지니게 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 되는 특성이 있으니 상황에 맞게 사용해야 합니다.

css

.parent {
    display: inline-block;
}

micro clearfix

여섯 번째 float 해제 방법

마지막 여섯 번째 방법으로 micro clearfix 방법입니다.

지금까지 소개한 방법들 중에 가상요소를 제외한 방법들은 꽤 오래된 방식이고 표준을 지원하지 않는 브라우저로 인해 이러한 테크닉이 생겨나기도 했습니다.

마지막 방법은 CSS 연구전문가인 니콜라스 갤러거가 고안한 방법으로 처음 HTML5 보일러플레이트란 템플릿 엔진에서 사용되었습니다.

2011년에 고안되었지만 부트스트랩에서도 이 방법을 사용하면서 널리 알려지게 되었습니다.

아래 방법은 가상 클래스를 이용한 방법으로 지금까지 알아본 legacy 방식 중에 네 번째 방법을 좀더 안전하게 사용하기 위해 개발된 micro 방식입니다.

css

.clearfix:before,
.clearfix:Aafter { 
    content: " "; 
    display: table; 
}
.clearfix:after { 
    clear:both; 
}

다음은 legacy type 과 micro type 을 비교하면서 작성한 SCSS 코드입니다.

Scss 타입으로 다음과 같이 작성하실 수 있습니다.

scss

// * --------------------------------
// * Legacy Clearfix
// * --------------------------------

.clearfix {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
  .lt-ie8 & {
    zoom: 1;
  }
}

scss

// * --------------------------------
// * Micro Clearfix
// * --------------------------------

.cf {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
  .lt-ie8 & {
    zoom: 1;
  }
}

@ 오페라의 경우 html 문서에서 contenteditable 속성을 사용할 경우에 float 가 취소된 요소의 상단과 하단에 빈 공백을 만들게 되기 때문에 content: " " 는 오페라의 버그를 피하기 위한 방법이며 자식 요소의 margin-top 값을 포함하도록 하기 위해 before를 이용하여 display: table 을 설정하여 줍니다.

Jaehee's WebClub