[css] float를 취소하기 (clearfix 4가지 방법)

 

 

[css] float를 취소하기 (clearfix 4가지 방법)

 

보통 레이아웃을 만들 때, 내부 div(자식)와 그것을 둘러싼 또 하나의 div(부모)를 만듧니다.

 

우리가 원하는 레이아웃은 아래 그림처럼,

 

1. 자식 div가 좌우로 float 되고,

 

2. 부모가 자동으로 자식 div를 담아낸 모습일 것입니다.

 

 

 

 

하지만, 자식 div를 담고 있는 부모 div는 너비나 특별한 속성을 추가하지 않으면

 

float 된 자식 div를 담아내지 못합니다.  (아래 그림 참조)

 

float 된 요소는 이전 요소에 영향을 미치지 않고, 다음 요소에 영향을 미칩니다.

 

따라서 다음 요소 역시 float 상태로 글자나 이미지가 따라 붙습니다.

 

float 속성에 대하여

 

 

그래서 부모 요소가 float 된 요소를 담아낼 수 있고, 다음 요소가 float에 영향을 받지 않도록

 

float를 취소하기 위한 방법이 오래 전부터 연구돼 왔습니다.

 

영어로 clearing floats 또는 clearfix methods라고 함.

 

 

1. clear 속성을 사용하기

 

가장 고전적인 방법으로, 자식 div 바로 다음 요소에 clear 속성을 사용해 float를 취소합니다.

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

 

html

<div id="wrapper">
<div class="one">자식 div </div>
<div class="one">자식 div </div>

<br class="clear">

</div> 

 

css

#wrapper{border: 5px solid #FFB2F5; background-color: yellow;}
.one{float:left; width:50%; height: 150px; border: 5px solid purple;box-sizing: border-box;}

.clear{cear:both;}

 

이 방법은 아주 쉽고 단순하지만 빈 요소를 사용했다는 것과, 내용과 표현의 분리라는 측면에서

 

현재는 권장하는 방법이 아닙니다.  

 

 

2. overflow 속성 사용하기

 

두번째로, 부모 div에 overflow: hidden이나 auto 속성값을 사용하면, 부모 div가 자식 div를 담아낼 수 있도록 확장됩니다.

 

다만 hidden은 내용이 길 경우 내용이 잘리거나, auto일 경우 내용이 길 경우 스크롤바가 생깁니다

 

overflow 속성 (overflow: visible, hidden, scroll, auto 차이)

 

 

 

3. ::before ::after 가상 클래스 사용하기

 

부모 div에 :before :after 가상 클래스를 사용하여 요소를 블록 요소로 만들고, 

 

:after 가상 클래스로 float를 취소합니다.

 

:before , :after 가상 요소

 

display 속성을 사용하여 table만들기 (css로 table, tr, td)

 

html

<div class="clearfix">
<div class="one">자식 div </div>
<div class="one">자식 div </div>

</div> 

 

css

.clearfix{border: 5px solid #FFB2F5; background-color: yellow;

             zoom: 1;}  /* 1 */

.one{float:left; width:50%; height: 150px; border: 5px solid purple;box-sizing: border-box;}

.clearfix:before, .clearfix:after{content: " ";    /* 2 */

 display: table;}      /* 3 */

.clearfix:after{clear: both;} 

 

 

1.  zoom:1은 ie6,7 버전이 haslayout을 갖도록 해, 자식 요소를 담기 위해 확장 됨.

 

haslayout 이란 (IE버그 해결책)

 

2. Opera 의 경우 html 문서에서 contenteditable 속성을 사용할 경우
float가 취소된 요소의 상단과 하단에 공백을 만드는데,
content: " " 는 이 오페라 버그를 피하기 위한 방법임.

 

3. 자식 요소의 top-margin을 포함하기 위해 :before 를 사용하면
display:block보다 disply: table을 사용 함

 

 

첨부 파일 다운 받아 확인해 보세요

clearfix.html

 

 

ie8 이하의 지원이 필요치 않을 경우 이렇게만 해도 됨.

 

css

.clearfix{border: 5px solid #FFB2F5; background-color: yellow;}

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

.one{float:left; width:50%; height: 150px; border: 5px solid purple;box-sizing: border-box;}

 

 

4. contain-floats 속성값 사용하기

 

w3c 명세에는 min-width, min-height 속성에 contain-floats 속성값이 추가되었습니다.

 

위의 2, 3번 방법과 같은 효과가 나타납니다.

 

*아직까지 지원되는 브라우저는 없습니다.*

 

 

사용법

 

.wrapper{min-height: contain-floats;}
 
아래 사이트를 참조했습니다.

 

http://nicolasgallagher.com/micro-clearfix-hack/

 

http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

 

http://dev.w3.org/csswg/css-sizing/#the-contain-floats-value