CSS Float 탈출하는 방법

방법

float에 float으로 대응하는 방법

자식 엘리먼트 뿐만 아니라 부모에게도 float 속성을 부여하는 방법이다. 부모에게 float 속성을 부여하게 되면 부모 엘리먼트는 자식 엘리먼트의 높이를 반영함.

단점 - 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실이다. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 힘들고, 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위해서 조상 엘리먼트 모두 float 시켜야 하는 문제점이 있다. ( 예시 http://jsfiddle.net/webjin85/Aj3Mz/ )

float에 overflow 속성으로 대응하는 방법

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow: auto 또는 overflow: hidden 속성을 부어야는 방법이 있다.

  • 단점 - overflow: auto의 경우 자식 엘리먼트가 부모보다 크면 스크롤바를 유발하고, overflow: hidden이면 넘치는 부분이 잘리는 문제점이 있다.

( 예시 http://jsfiddle.net/webjin85/RXnwx/ )

float을 빈 엘리먼트로 clear 하는 방법

float값이 지정된 엘리먼트 뒤에 빈 엘리먼트를 넣고 빈 엘리먼트에 clear: both 속성을 부여하여 clear해주는 방법이다.

  • 단점 - 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아니다.

( 예시 http://jsfiddle.net/webjin85/Jz54c/ )

float을 가상 선택자 :after로 clear 하는 방법

일단 가상 선택자를 알아보면 우리가 알고 있는 :link, :visited, :hover, :active, :focus는 모두 가상 선택자 이다. '가상 선택자'는 다시 '가상 클래스'와 '가상 엘리먼트'로 구분된다.

'가상 클래스'는 특정 엘리먼트에 대하여 아무런 class를 부여하지 않았지만 마치 역동적으로 class를 변경한것과 같은 효과를 낼 수 있는 것들로서 이미 존재하는 엘리먼트에 조합해서 사용할 수 있다.(:link, :visited, :hover, :active, :focus, :first-child) '가상 엘리먼트'는 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서 :first-line, :first-letter, :before, :after가 있다. :before와 :after는 HTML문서상에 존재하지 않는 콘텐츠를 출력시키기도 함.

이렇게 가상의 엘리먼트를 생성 시킨 다음 display: block; clear:both; 처리를 추가하게 되면 의미 없는 빈 엘리먼트를 사용하지 않으면서도 엘리먼트를 이용하여 깔끔하게 float이 clear 된다. ( 예시 http://jsfiddle.net/webjin85/9D7bp/ )

부트스트랩

트위터 부트스트랩에서는 부모에 clearfix라는 클래스를 추가해주면 된다.

<div class="clearfix">
  ... blah ....
  ... blah ....
</div>

같이 보기