[CSS] float 속성 해제(clearfix) 방법 - overflow:hidden, ::after

마크업을 하다 보면 float를 사용 하는 경우가 많이 있습니다.

비슷한 기능으로 Flex(Flexible Box) 가 있으나...저는 IE9버전까지 항상 생각해야 하기 때문에 사용 할 수가 없어서

float만 열심히 사용 하고 있습니다.

 

메뉴바를 만들 경우에도 사용하고 div 요소를 가로로 정렬할때도 대부분 사용하고 있습니다.

block 요소를 가로로 정렬 하는 방법은 여려가지 방법이 있으나..다음에 포스팅 해보도록 하겠습니다.

 

float:left, float:right 를 사용 하고 나면 항상 부모요소의 높이값이 제대로 적용 되지 않아 UI를 침범한다거나 

주변 텍스트나 인라인 요소들이 주위를 감싸게 됩니다. 이미지로 예시를 들면 좋겠으나..귀차니즘으로 인해....

음....그냥 UI가 이상해 진다고 생각하고 넘어갑시다~;;;

무슨 소리인지 모르시겠다면 아래 동영상을 보시면 이해 되실 겁니다. 급하신 분은 10분 부터 보시면 됩니다.

https://www.youtube.com/watch?v=8xKDSdHQ35U

 

이를 막기 위해서 float 속성을 해제 해줘야 하는데요.

공부할때 배웠던 방식은...float를 사용하고 부모 요소에 overflow:hidden을 사용 하면 된다고 배웠고 

이것을 공식처럼 사용하고 있었습니다.

 

이외에도 float 속성을해제 하는 방법은

 

1. 부모요소에 overflow:hidden; 을 사용한다.

가장 간단하고 많이 사용되고 있는 방법이라 생각합니다. 

이 방법의 단점은 position:absolute 등의 이용하는 팝업 같은 경우 부모 요소를 벗어나는 부분은 가려져 보이지 않는 단점이 있습니다.

물론 이런 단점을 고려하고 마크업 한다면 나쁘지 않는 방법이라고 생각합니다.

 

2. 부모요소에 높이값을 지정한다.

overflow:hidden을 사용시 발생하난 단점을 보완하기 위해 사용했던 방법 입니다.

이 방법의 단점은 높이 값이 고정 되어야 하기 때문에 가변적인 높이를 가져야 하는 마크업일 경우에는 변화 할때마다 높이값을 계속 적으로 변경 시켜줘야 하는 불편함이 있어서 추천 드리지 않습니다.

 

3. 인접한 요소에 clear:both;를 사용한다.

float 속성을 해제 해야 하는 부모요소의 인접요소를 만들어준다. 쉽게 말하면 의미없는 div를 만들어 주고 clear:both를 사용해 줍니다.

clear 속성이 float 속성을 해제 해주는 역할을 한다고 합니다.

<div style="clear:both"></div>

이 방법은 의미없는 요소가 들어가기 때문에 웹접근성을 고려할 때 좋지 않은 방법인것 같습니다.

 

4. 가상요소( ::after )를 이용한 해제 방법

이 방법이 오늘 포스팅을 하는 이유입니다.

가상요소인 ::after을 이용한 방법으로

부모요소 클래스나 아이디에 :after { content:""; display:block; clear:both; }를 사용하여 float 속성을 해제할 수 있습니다.

세번째 방법으로 말씀드린 방법과 동일한 효과를 내는 방법이지만 웹접근성에 위배되지 않는 방법입니다.

이 방법의 단점은 아직 잘 모르겠습니다.

 

이외에도 여려 방법이 더 있을 것 같은데 우선 제가 사용해본 방법만 정리해 보았습니다.

 

전 네번째 방법을 얼마전에 알게 되었고 바로 적용해서 유지보수 할 때 사용해 봤습니다.

overflow:hidden을 사용하면서 가끔 불편할 때가 있었는데 가상요소를 이용한 방법을 사용하니 불편함이 싹 사라지네요.