플로팅(float) 레이아웃과 clear 속성

레이아웃 디자인 - Floating

뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 속성에 대해 알아보겠습니다.

플로팅 레이아웃(float)

대표적인 레이아웃 테크닉인 플로팅(Floating)을 알아보고, 이 속성과 관련된 clear 속성에 대해 알아봅니다.

일반적인 레이아웃 흐름(Normal Layout Flow)

See the Pen normal layout by jaeheekim (@jaehee) on CodePen.

CSS 가 미반영된 화면에서 위에서부터 아래 방향으로 나열되는 것이 일반적인 레이아웃 흐름이라고 할 수 있습니다.
위 HTML 코드 마크업상 <h1> 요소 다음에 <p> 요소의 순서대로 제목이 나오고 단락이 나오는 형태가
HTML 문서를 해석한 웹브라우저가 화면에 그리는 방식입니다.

플로팅(Floating) 레이아웃

CSS float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다.

복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다

다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.

여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.

이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

See the Pen 플로팅 샘플 by jaeheekim (@jaehee) on CodePen.

css

.box {
    float: value;
}

다음은 float 의 속성값(value)입니다.

• left : 요소를 왼쪽 방향으로 부유하게 설정
• right : 요소를 오른쪽 방향으로 부유하게 설정
• none : 기본값(default), 요소를 띄우지 않는다.

플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.

이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 기법이 floating 이라는 기법입니다.

플로팅 모델 살펴보기

중요한 사실은 플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 된다는 점입니다.

인라인 요소인 링크(anchor)를 플로팅시키는 경우에 이 요소 특성은 블럭 박스로 변경되고 마치 div 인 것처럼 동작하게 됩니다.

대신 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링되는 것이 특이한 점입니다.

다시 말해, 플로팅된 요소는 display: inline-block; 을 선언한 것과 동일해지기 때문에 따로 선언해줄 필요는 없습니다.

clear - 플로팅 해제 기법

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 될 것입니다.
이는 플롯을 사용하면 발생되는 현상이며 이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 합니다.

여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라
clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미입니다.

플롯을 해제하는 방법 중에 전 세계적으로 통용되는 이름(관용적인 기법의 이름)으로 clearfix 라는 방법이 있습니다.

물론 clear 속성을 적용하기 보다 다른 방법으로도 플롯을 해제할 수는 있으나 float 을 사용해 레이아웃을 잡다보면 clear 가 필요해지기 때문에 가급적 플롯된 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장하고 있습니다.

다시 말해, float 이 적용된 자식 요소를 부모 요소가 감싸 안지 못하는 현상을 해결하기 위해서는 대략적으로 6가지 방법이 있는데
그 중 대표적으로 많이 사용 되는 방법이 clearfix 입니다.

즉, clearfix 방법은 무조건이라기 보다 필요에 의해서 사용하는 것입니다.

css

.clearfix { clear: value; }

clear 속성값은 다음과 같습니다.

• left : 왼쪽에 floating 된 요소를 지정 해제
• right : 오른쪽에 floating 된 요소를 지정 해제
• both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
• none : 기본값(default), floating 을 해제하지 않음

플롯을 해제하기 전과 해제 후 살펴보기

첫 번째 float 해제 방법

css

.parent { float: left; }

플롯된 요소가 자식 요소일 경우에 부모요소는 자식 요소(문서 흐름에서 벗어남)를 감싸지 못하는 특징으로 인해 레이아웃이 무너진 형태처럼 보이게 됩니다. 이는 플롯을 사용하게 되면 발생되는 현상이며 이 문제를 해결하기 위해서는 플롯의 영향을 받지 않도록 해야합니다.

다시 말해, 부모요소는 플롯된 자식요소를 포함하는 경우에 부모요소는 높이를 인지하지 못하게 됩니다.

이 문제를 해결하는 방법 중에 하나가 부모(컨테이닝 요소)에게도 float 속성을 반영하는 방법입니다.

이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 비주얼 디자인 레이아웃에 따라 상황에 맞도록 사용해야 합니다.

두 번째 float 해제 방법

이 방법 역시 부모 요소에 적용하는데 display: inline-block; 속성을 사용하는 방법이 있습니다.

부모 요소는 자식 요소의 높이를 인지하게 되지만 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 됩니다.

css

.parent { display: inline-block; }

세 번째 float 해제 방법

세 번째 방법으로 플롯을 해제할 수 있는 속성은 overflow:hidden; 방식입니다.

이 속성 역시도 부모 요소에 적용해야 하며, 이 속성의 특징은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성입니다.

overflow: auto;를 적용해도 되지만 자식 요소 박스의 너비가 부모 요소 박스의 너비보다 클 경우에 스크롤이 생기기 때문에 권장되지 않습니다.

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

넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것입니다.

그런데 부모 요소가 플롯된 자식 요소로 인해 높이를 인지하지 못하고 있는 상황에서 overflow: hidden; 속성을 적용하게 되면 부모 요소(컨테이닝 박스)는 넘치는 요소를 숨김 처리를 하려고 하기 때문에 자식 요소의 높이를 인지하기 위해 자동으로 높이값을 계산하게 됩니다.

css

.parent { overflow: hidden; }

참고로 overflow:hidden; 속성을 적용하는 방법은 권장되지는 않습니다.

예를 들어, 동적(스크립팅)으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야 합니다.

네 번째 float 해제 방법

이 방식은 과거(Legacy)에 널리 사용되던 방식(현재는 지양)으로 플롯된 요소의 마자막 요소(형제 레벨)로 빈 엘리먼트 작성하여 clear 속성을 적용하는 방법이 있습니다.

HTML

<div class="box-group">
    <div class="box is-blue"></div>
    <div class="box is-yellow"></div>
    <div class="box is-green"></div>
    <div class="clear"></div>
</div>

이 방법 또한 불필요한 의미없는 빈 요소를 이용하는 것이기 때문에 가장 권장되지 않는 방법입니다.

다섯 번째 float 해제 방법

지금까지 소개한 방식 중 가장 널리 쓰이고 있는 테크닉으로 CSS의 가상(슈도클래스, 의사클래스) 클래스를 이용하는 방법이 있습니다.

앞서 소개한 방법은 불필요한 의미없는 요소를 작성해야 했지만 이 방법은 CSS 를 통해 빈 가상 요소를 생성하여 float 을 해제하는 방법입니다.

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

css

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

이 방식은 구형 브라우저인 IE7 에서 가상 요소를 지원하지 않기 때문에 다음과 같은 핵을 사용해야 합니다.

가상 요소 대신에 부모 요소에 CSS 핵인 *zoom:1; 이라는 속성을 적용하는데 이는 MS사의 인터넷익스플로러 구형 브라우저 중에 [IE 5.5 ~ 7]은 hasLayout 이라는 속성을 가지게 구현해 놓은 IE 만의 고유한 속성입니다.

여섯 번째 float 해제 방법

마지막으로 소개해 드리는 방식은 micro clearfix 라는 이름의 테크닉입니다.

이 방법은 CSS 연구전문가인 니콜라스 갤러거가 고안한 방법(micro clearfix hack)으로 처음 HTML5 보일러플레이트란 템플릿 엔진을 통해 소개되었습니다.

2011년에 고안되었지만 이후 부트스트랩(Ver.1~3)에서 이 방법을 사용하면서 널리 알려지게 되었습니다.

css

.parent {
    /* For IE 6/7 only */
    *zoom: 1;
}
.parent:before,
.parent:after {
    content: "";
    display: table;
}
.parent:after {
    clear:both;
}

마치며

지금까지 뷰포트와 관련하여 박스를 배치시키는 방법과 그에 따른 문제를 해결하기 위한 속성을 살펴 보았습니다..
CSS 레이아웃과 관련된 방법은 position 속성도 있으나 차세대 테크닉인 플렉스박스(flexbox), 그리드 등의 방법이 새롭게 유행하고 있으니 살펴보시기 바랍니다.

Related Info

1. CSS 레이아웃

Jaehee's WebClub