float

CSS에서 float는 레이아웃을 만들 때, 블록 요소들을 가로 정렬을 시킬 때 자주 사용한다.

float의 간단한 사용법과 예시는 여기서 다루지 않고, 이 글에서는 float를 사용할 때 생길 수 있는 문제와

이를 해결할 수 있는 기법들에 대해 소개하고자 한다.

 

float 프로퍼티가 선언된 자식 요소로 인한 부모 요소의 부적절한 높이

---

See the Pen bGNMoRv by Catnap421 (@catnap421) on CodePen.

 

자식 요소에 float 프로퍼티를 주게 되면 위 코드와 같이 부모 요소의 높이가 제대로 설정되지 않는다. float 요소는 일반적인 흐름상에 있는 게 아니기 때문에 float 요소의 높이를 알 수 없고, 부모 요소는 이로 인해 제대로 높이가 표현되지 않는다.

 

1. overflow 활용

---

See the Pen oNgdGBb by Catnap421 (@catnap421) on CodePen.

 

부모 요소에 overflow: hidden; 혹은 overflow: auto;를 삽입해주면 부모 요소의 높이가 제대로 처리된다. 이 방법은 예전부터 많이 사용된 방법으로 코드가 한 줄이라 편리하다.

 

2. ::after 가상 요소 선택자 활용

---

See the Pen mdyLBmm by Catnap421 (@catnap421) on CodePen.

 

부모 요소에 clearfix라는 선택자를 제공하고, 자식 요소가 끝나는 지점에. clearfix::after를 이용해 처리한다.

하나하나 설명하자면, ::after를 통해 부모 요소가 끝나는 지점에 content:''를 삽입하는데, 이 때 이 콘텐츠의 디스플레이 방식을 블록으로 처리한다(display: block;). 또한 floating 된 자식 요소들을 clear를 통해 제거함으로써 부모 요소의 높이를 제대로 처리한다. 위 방식은 따로 찾아보다 알게 되었으며, overflow 방식에 비해 깔끔하며, 안전하게 처리할 수 있어서 활용도가 높다.

 

width 100% 문제

---

 

두 요소 중 검색어 요소가 width 100%를 갖고 있는 모습

float 프로퍼티를 가로 정렬할 요소들 중 한 요소에만 주게 되면 어떠한 결과가 나타날까?

 

한 요소의 width가 100%가 아닌 상태에서 float 프로퍼티를 적용하면 위 그림과 같이 된다.

얼핏보면 정상적으로 위치해 보인다. 하지만 요소 하나하나를 눌러보면 원하는 결과를 갖지 않는 걸 확인할 수 있다.

세모말 요소는 정상적으로 위치하지만, 검색어 요소는 width 값으로 100% 가짐을 확인할 수 있다. 이러한 경우를 막기 위해 float 프로퍼티를 가로 정렬할 요소들 모두에게 적용해야 한다. 

 

정상적으로 width가 적용된 모습

 

이제 정상적으로 적용된 걸 볼 수 있다.

 

Reference

---

 

• CSS3 Float 요소 정렬 PoiemaWeb

 

CSS3 Float | PoiemaWeb