CSS에서 float 해제를 위한 여러 방법 중 애용하는 몇 가지

CSS에서 float란 개념은 참 쉬우면서도 어려운 개념이다. 각 요소들간의 관계도 따져봐야 하고, 부모요소와 자식요소 간의 관계도 따져봐야 한다. 수치 계산도 해야 하고, 정렬 문제도 고민해야 한다.

특히 제때제때 float를 해제해주는게 골치아픈데, 박스요소 안에 float된 요소가 있을 때나 바로 아래에 float되지 않은 요소 등을 넣을 때 신경쓰인다.

▲ 가장 흔한 박스 안의 float 요소. 노란색 박스 안에 빨강, 파랑 박스가 각각 좌우로 float된 형태. 딱 위와 같은 모습을 원하지만...

 

▲ 막상 만들어보면 이렇게 되기 일쑤. 빨강, 파랑 박스의 높이값 만큼 노란색 박스의 높이값이 늘어나지 않는다. 이때 float를 해제시켜주어야 하는데...

 

방법 1. float 해제 전용 요소

아무 생각없이 그냥 막 쓸 수 있는 방법인데, 바로 float된 요소들 바로 아래에 '해제 전용 요소'를 하나 넣어주는 것이다. 내 경우엔 전용 클래스를 만들어 쓰고 있다.

.c { clear: both; font-size: 0%; line-height: 0%; margin: 0px!important; padding: 0px!important; }

위와 같은 클래스를 공통CSS에 넣어두고 div.c 형태로 사용한다. 가령 위 예제 이미지 속 상황이라면

<div class="wrap">
<div class="f_left">left float box<br>yeah left float box!</div>
<div class="f_right">right float box<br>yo! right float box</div>
<div class="c"></div>
</div>

이렇게 써버린다. 간단해서 애용하는 방식. 물론 코드는 좀 지저분해진다. 하지만 당장 급할 땐 꽤 유용하게 쓸 수 있다. div.c 하나면 끝.

 

방법 2. :after 선택자 사용

1의 방법이 코드를 지저분하게 만들어 별로라면, 이 방법은 CSS 내에서만 코드가 추가되므로 꽤 깔끔하게 끝낼 수 있다. 바로 :after 선택자를 이용해서 해제해주는 방법. 최근 많이들 쓰는 방법인데, 위 예제 이미지 속 상황이라면 다음과 같이 쓰면 된다.

.wrap:after { content: "."; display: block; font-size: 0; height: 0px; line-height: 0; clear: both; }

float된 요소들을 감싸고 있는 노란색 박스(.wrap)의 다음(after)에 점 하나를 찍고, 박스요소로 만든 다음, clear를 걸어버리는 방법. 방식 자체는 1번과 크게 다르지 않은데, CSS 내에서 다 처리한다는데에 차이가 있다. 그리고 어째서 .f_right 요소가 아닌 .wrap 요소의 after인지도 개인적으론 좀 어려운 부분. 아무튼 이렇게 쓴다. CSS에서는 다중클래스도 지원하기 때문에, 해제시킬 요소에 다중클래스로 적용해도 될 듯.

 

---

 

아무튼 개인적으론 이 두 가지 방법을 자주 쓴다. 이것 외에도 다양한 float 해제 방법이 있으니 그건 맘대로 골라서 쓰면 되겠다.(사실 저 스타일들을 외우지 못해 저장용으로 쓰는 포스팅)